Introdução ao HTML - Hélder OliveiraConcepção de WebsitesIntrodução ao HTML
Introdução ao HTML - Hélder OliveiraO que é o HTML?• HyperText Markup Language• Definido por Tim Berners-Lee em1990, no CE...
Introdução ao HTML - Hélder OliveiraAs bases do HTML• É um formato interpretado pelo Browser• Baseado em documentos de ext...
Introdução ao HTML - Hélder OliveiraEstrutura de uma Página HTML<html><head>[Instruções do Cabeçalho]</head><body>[Instruç...
Introdução ao HTML - Hélder OliveiraEstrutura de uma Página HTML(Exemplo)<html><head><title>11.º C</title></head><body>Bem...
Introdução ao HTML - Hélder OliveiraAtributos• Permite configurar propriedades de cada tag• São sempre incluídos na tag de...
Introdução ao HTML - Hélder OliveiraCharacter Entities• Técnica pararepresentação de:– Caracteres reservados aocódigo HTML...
Introdução ao HTML - Hélder OliveiraTags elementares• Cabeçalhos– H1, H2,H3…H6– Exemplo:<h1>Um titulo grande</h1><h3>Um ti...
Introdução ao HTML - Hélder OliveiraTags elementares• Quebras de linha– Tag br– Exemplo:<p>Isto é umparágrafo<br/>queconti...
Introdução ao HTML - Hélder OliveiraTags elementares• Divisões de conteúdos– Tag hr– Permite os atributos:• Align• Noshade...
Introdução ao HTML - Hélder OliveiraListas• Ordenadas• Desordenadas• Definições
Introdução ao HTML - Hélder OliveiraListas Ordenadas<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
Introdução ao HTML - Hélder OliveiraListas Ordenadas• Atributo Type– type=“a”– type=“i”– type=“1”– Type=“I”• Exemplo:<ol t...
Introdução ao HTML - Hélder OliveiraListas Desordenadas<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Introdução ao HTML - Hélder OliveiraListas Desordenadas• Atributo Type– type=“disc”– type=“square”– Type=“circle”• Exemplo...
Introdução ao HTML - Hélder OliveiraListas de Definições<dl><dt>Item 1</dt><dd>Texto de definição do Item 1</dd><dt>Item 2...
Introdução ao HTML - Hélder OliveiraFundo da Página• Cor<body bgcolor="#999999">• Imagem<body background="fundo.jpg">
Introdução ao HTML - Hélder OliveiraFormatação de Texto• Tags para formataçãoTag Formatação<b> Texto a negrito<big> Texto ...
Introdução ao HTML - Hélder OliveiraFormatação de Texto• A tag Font– Permite configurarpropriedades dotexto como:• A cor• ...
Introdução ao HTML - Hélder OliveiraComentários• Início de Comentário<!--• Fim de Comentário-->• Exemplo:<p>Código não com...
Introdução ao HTML - Hélder OliveiraFIM
Próximos SlideShares
Carregando em…5
×

Apresentacao aula1

169 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
169
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Apresentacao aula1

  1. 1. Introdução ao HTML - Hélder OliveiraConcepção de WebsitesIntrodução ao HTML
  2. 2. Introdução ao HTML - Hélder OliveiraO que é o HTML?• HyperText Markup Language• Definido por Tim Berners-Lee em1990, no CERN (Suiça)• Permite a formatação de informaçãopartilhada na Internet• Linguagem intimamente ligada àsorigens da WebTim Berners-Lee
  3. 3. Introdução ao HTML - Hélder OliveiraAs bases do HTML• É um formato interpretado pelo Browser• Baseado em documentos de extensão .htm ou .html• Comandos baseados em tag’s (marcas):• Exemplos:<tag>conteúdo</tag> ou <tag/><b>Conteúdo a Negrito</b><img src=“ola.jpg”/><br/>
  4. 4. Introdução ao HTML - Hélder OliveiraEstrutura de uma Página HTML<html><head>[Instruções do Cabeçalho]</head><body>[Instruções para formatação dos conteúdos]</body></html>
  5. 5. Introdução ao HTML - Hélder OliveiraEstrutura de uma Página HTML(Exemplo)<html><head><title>11.º C</title></head><body>Bem-vindo ao 11.º C!</body></html>
  6. 6. Introdução ao HTML - Hélder OliveiraAtributos• Permite configurar propriedades de cada tag• São sempre incluídos na tag de abertura• Exemplos:– <a href=“pagina.htm” class=normalLink>Link</a>– <img src=“imagem.jpg” border=0/>
  7. 7. Introdução ao HTML - Hélder OliveiraCharacter Entities• Técnica pararepresentação de:– Caracteres reservados aocódigo HTML– Símbolos e caracteres deoutras culturas• Sintaxe:&[NOME];Ou&#[NUMERO];• Exemplos:Código Caracter&gt; >> >&eacute; é&ccedil; ç
  8. 8. Introdução ao HTML - Hélder OliveiraTags elementares• Cabeçalhos– H1, H2,H3…H6– Exemplo:<h1>Um titulo grande</h1><h3>Um titulo mais pequeno</h3>• Parágrafos– Tag p– Exemplo:<p>Isto é um parágrafo</p><p>Isto é o parágrafo seguinte</p>
  9. 9. Introdução ao HTML - Hélder OliveiraTags elementares• Quebras de linha– Tag br– Exemplo:<p>Isto é umparágrafo<br/>quecontinua aqui</p>
  10. 10. Introdução ao HTML - Hélder OliveiraTags elementares• Divisões de conteúdos– Tag hr– Permite os atributos:• Align• Noshade• Size• Width– Exemplo:<p>Conteúdo antes da divisão</p><hr><p>Conteúdo depois da divisão</p><hr size=5 width=200 align=right><p>Conteúdo depois da divisão</p>
  11. 11. Introdução ao HTML - Hélder OliveiraListas• Ordenadas• Desordenadas• Definições
  12. 12. Introdução ao HTML - Hélder OliveiraListas Ordenadas<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
  13. 13. Introdução ao HTML - Hélder OliveiraListas Ordenadas• Atributo Type– type=“a”– type=“i”– type=“1”– Type=“I”• Exemplo:<ol type="I"><li>Conseno</li><li>Seno</li><li>Tangente</li></ol>
  14. 14. Introdução ao HTML - Hélder OliveiraListas Desordenadas<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
  15. 15. Introdução ao HTML - Hélder OliveiraListas Desordenadas• Atributo Type– type=“disc”– type=“square”– Type=“circle”• Exemplo:<ul type="square"><li>Conseno</li><li>Seno</li><li>Tangente</li></ul>
  16. 16. Introdução ao HTML - Hélder OliveiraListas de Definições<dl><dt>Item 1</dt><dd>Texto de definição do Item 1</dd><dt>Item 2</dt><dd>Texto de definição do Item 2</dd><dt>Item 3</dt><dd>Texto de definição do Item 3</dd></dl>
  17. 17. Introdução ao HTML - Hélder OliveiraFundo da Página• Cor<body bgcolor="#999999">• Imagem<body background="fundo.jpg">
  18. 18. Introdução ao HTML - Hélder OliveiraFormatação de Texto• Tags para formataçãoTag Formatação<b> Texto a negrito<big> Texto grande<em> Texto a Itálico Sombreado<i> Texto Itálico<small> Texto PequenoTexto Grande a Negrito<sub> Texto Inferior à Linha<sup> Texto Superior à Linha<ins> ou <u> Texto Sublinhado<del> Texto Rasurado
  19. 19. Introdução ao HTML - Hélder OliveiraFormatação de Texto• A tag Font– Permite configurarpropriedades dotexto como:• A cor• A Fonte• O tamanho• Exemplo<font size=1>Texto pequeno</font><br/><font color=“blue”>Texto Azul</font><br/><font face=“Arial”>Tipo de letra Arial</font><font face=“sans-serif” color=“red”size=5>Texto não serifado, de cor vermelhae tamanho grande</font>
  20. 20. Introdução ao HTML - Hélder OliveiraComentários• Início de Comentário<!--• Fim de Comentário-->• Exemplo:<p>Código não comentado</p><!--<p>Código comentado</p>-->
  21. 21. Introdução ao HTML - Hélder OliveiraFIM

×