Your SlideShare is downloading. ×
0
HTML/CSS
Dados Pessoais
 Nome: Fernando Vargas
 Curso: Sistemas de Informação
 Twitter: twitter.com/fernandopfv
 Blog: www.soci...
Estrutura HTML
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Algumas Tags Importantes
<!-- comentar codigos no código html -->
<!– border serve para colocar borda na tabela -->
<table...
Esta tag é inserida dentro das tags “head” e serve
para referenciar um arquivo externo.
<link href=“css.css"rel="styleshee...
Tags
 <marquee>
 Esta tag serve para exibir um letreiro
 <blink>
 Para faze o texto ficar piscando
Fazendo links
<a href=“#”>Nome do link </a>
Ancora
 Exemplo de Ancora em HTML
Implementação de Ancora:
<a href="#nome da ancora">Aqui voce coloca todo o
texto deseja...
Tags para Listas
<ul> <!-- Cria uma lista -->
<li> <!– Cria item uma lista -->
teste 1
</li>
<ul> <!– Para subitens de uma...
Tag DIV
O elemento div foi criado com o HTML 4 com a
finalidade de fornecer um mecanismo genérico
para agrupar e prover es...
Estilos
 É a abreviatura para Cascading Style Sheets.
— Folha de Estilos em Cascata.
 define o layout de documentos HTML.
Diferença entre HTML e CSS
 HTML é usado para estruturar conteúdos. CSS é usado
para formatar conteúdos estruturados.
Benefícios
 CSS é uma revolução no mundo do web design. Os
benefícios concretos do uso de CSS incluem:
 controle do layo...
Estrutura do CSS
 Ex:
body {
background-color: #FF000;
}
Exercicio 1
 Fazer um página contendo dois links internos um com uma
lista com subitens e o outro link com textos e ancor...
Upcoming SlideShare
Loading in...5
×

Htmlbasico

378

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
378
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Htmlbasico"

  1. 1. HTML/CSS
  2. 2. Dados Pessoais  Nome: Fernando Vargas  Curso: Sistemas de Informação  Twitter: twitter.com/fernandopfv  Blog: www.sociedadeeinformatica.blogspot.com  E-mail: fernando.pfv@hotmail.com  Exemplo de site desenvolvido: www.elos-eventos.com.br
  3. 3. Estrutura HTML <html> <head> <title></title> </head> <body> </body> </html>
  4. 4. Algumas Tags Importantes <!-- comentar codigos no código html --> <!– border serve para colocar borda na tabela --> <table border=“1”> <tr> <!-- Representa uma linha da tabela --> <td> Representa célula(coluna) da tabela </td> </tr> </table>
  5. 5. Esta tag é inserida dentro das tags “head” e serve para referenciar um arquivo externo. <link href=“css.css"rel="stylesheet“ type="text/css">
  6. 6. Tags  <marquee>  Esta tag serve para exibir um letreiro  <blink>  Para faze o texto ficar piscando
  7. 7. Fazendo links <a href=“#”>Nome do link </a>
  8. 8. Ancora  Exemplo de Ancora em HTML Implementação de Ancora: <a href="#nome da ancora">Aqui voce coloca todo o texto desejado</a> <A NAME="nome da ancora aqui"></A>
  9. 9. Tags para Listas <ul> <!-- Cria uma lista --> <li> <!– Cria item uma lista --> teste 1 </li> <ul> <!– Para subitens de uma lista--> <li> teste 2 </li> </ul> </ul>
  10. 10. Tag DIV O elemento div foi criado com o HTML 4 com a finalidade de fornecer um mecanismo genérico para agrupar e prover estrutura aos documentos. Alguns recursos desta tag é a facilidade de trabalhar estilos. É utilizado no CSS para que cada seção tenha atributos diferenciados
  11. 11. Estilos  É a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata.  define o layout de documentos HTML.
  12. 12. Diferença entre HTML e CSS  HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.
  13. 13. Benefícios  CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS incluem:  controle do layout de vários documentos a partir de uma simples folha de estilos;  maior precisão no controle do layout;  aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);  emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.
  14. 14. Estrutura do CSS  Ex: body { background-color: #FF000; }
  15. 15. Exercicio 1  Fazer um página contendo dois links internos um com uma lista com subitens e o outro link com textos e ancoras. O Título do corpo da página precisa ter um letreiro piscante. Para facilitar o trabalho copiem o texto da web porém a ancora precisa ser feita. As novas páginas deverão ter opção de voltar para a página anterior. No final da página inicial terá um letreiro com o seguinte texto: Fim da Página Index A página inicial deve estar centralizada.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×