Html básico

986 views
879 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
986
On SlideShare
0
From Embeds
0
Number of Embeds
216
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html básico

  1. 1. HTML Básico<br />Introdução ao HTML<br />Mini-Curso WebDesign IFPB<br />1<br />Samuel, Aleksandro e Alessandro<br />20/08<br />
  2. 2. Mini-Curso WebDesign IFPB<br />2<br />Preparação/Diretórios<br />Pasta : Mini-Curso<br />Pasta : Seu-Nome<br />Arquivos : tarefa.html<br />Arquivo : index.html<br />Backup : Pendrive<br />Pasta : imagens<br />Browser : Visualizar<br />
  3. 3. Mini-Curso WebDesign IFPB<br />3<br />Dicas de sinalização<br />Tarefas<br />Tarefa1.html<br />Tarefa2.html<br />Tarefa3.html<br />Básica<br />Intermediárias<br />Avançadas<br />Salve as Tarefas<br />
  4. 4. Mini-Curso WebDesign IFPB<br />4<br />Organograma do Site <br />index.html<br />trf1.html<br />trf2.html<br />trf5.html<br />trf3.html<br />trf4.html<br />trf6.html<br />Não deixe de fazer as tarefas<br />elas servirão como Conteúdo do seu site !<br />
  5. 5. Criando Página<br />Mini-Curso WebDesign IFPB<br /> Abra o bloco de nota e digite.<br /> Abra o Browser e visualize.<br />5<br />Tarefa 01<br />
  6. 6. Cabeçalhos<br />Mini-Curso WebDesign IFPB<br />6<br /> A tagde cabeçalho colocam <br /> uma quebra de linha onde são <br />declarados.<br />Tarefa 02<br />
  7. 7. Parágrafos<br />Mini-Curso WebDesign IFPB<br /> A tag<p> ela quebra a linha.<br />Sintaxe<p> ... </p><br />7<br />Tarefa 03<br />
  8. 8. Quebras de linha<br />Mini-Curso WebDesign IFPB<br />8<br /> A tag<br> ela dar uma quebra de<br /> linha no local onde foi escrita.<br />Sintaxe<br ><br />Tarefa 04<br />
  9. 9. Lista não Numerada<br />Mini-Curso WebDesign IFPB<br />9<br /> A tag<ul>ela cria uma estrutura de Tópicos não numerada.<br /> Cada novo item é fornecido pelo <br />Elemento <li > ... </li><br />Tarefa 05<br />
  10. 10. Lista Numerada<br />Mini-Curso WebDesign IFPB<br />10<br /> A tag<ol> cria uma estrutura<br /> de Tópicos numerada.<br /> Cada novo item é fornecido pelo <br />Elemento <li > ... </li><br />Tarefa 06<br />
  11. 11. Lista de Definição<br />Mini-Curso WebDesign IFPB<br />11<br /> A tag<dd> cria um espaçamento entre a margem <br />e o inicio da frase “TAB”.<br />Tarefa 07<br />
  12. 12. Lista Intercalada<br />Mini-CursoWebDesign IFPB<br />12<br /> Contem os dois tipos de lista :<br />Numerada e Não Numerada <br />Tarefa 08<br />
  13. 13. Texto pré-Formatado<br />Mini-Curso WebDesign IFPB<br />13<br /> O texto é apresentado no navagador na forma<br />Em que foi digitado no html.<br />Sintaxe<ol > ... </ol><br />Tarefa 09<br />&lt; / &gt;<br />
  14. 14. Formatando Textos<br />Mini-CursoWebDesign IFPB<br />14<br /> <b> NEGRITO <b><br /><i>ITÁLICO </i><br /><u>SUBLINHADO</u><br /><strong>STRONG</strong><br /><big>BIG</big><br /><small>SMALL </small><br /><sup> XSOBRESCRITO</sup><br /> <sub> XSUBSCRITO</sub><br />Tarefa 10<br />
  15. 15. Uso de Cores <body><br />Mini-CursoWebDesign IFPB<br />15<br />Tarefa 11<br />Bgcolor=#rgb<br />Fundo da Página<br />text=#rgb<br />Cor do Texto<br />
  16. 16. Imagem de Fundo <body><br />Mini-CursoWebDesign IFPB<br />16<br />< bodybackground = “caminho/nome.extensão”><br />Tarefa 12<br />
  17. 17. Inserindo Imagem <br />Mini-CursoWebDesign IFPB<br />17<br />< src=“caminho/nome.extensão”Width=tamanhoBorder= borda ><br />Tarefa 13<br />
  18. 18. Mini-CursoWebDesign IFPB<br />18<br />HTML Básico<br /> Introdução ao HTML<br />Samuel, Aleksandro e Alessandro<br />21/08<br />
  19. 19. Alinhamento de parágrafos<br />Alinhamento de Textos em ralação às imagens;<br />Hiperlinks, Links e Âncoras<br />Linhas de Separação<br />Cores para Links<br />Mini-Curso WebDesign IFPB<br />19<br />Sumário<br />Fontes<br />Tabelas<br />Textos que se movem<br />Frames<br />
  20. 20. Alinhamento de Parágrafos <br />Mini-CursoWebDesign IFPB<br />20<br /><p align=center> Centro </p><br /><p align=right> Direita </p><br /><p align=left> Esquerda </p><br /><p align=justify> Justificado </p><br />Intermediárias 14<br />Teste todos <br />os Alinhamentos no texto e na <br />Imagem ao lado !<br />MOSTRAR TAREFA 14<br />
  21. 21. Alinhamento de texto em Relação às imagens <br />Mini-CursoWebDesign IFPB<br />21<br /><imgsrc=“img.ext” align=top> Texto no Topo </p><br />< imgsrc=“img.ext” align=midlle> Texto nomeio </p><br />< imgsrc=“img.ext” align=bottom> Texto embaixo </p><br />Insira a imagem “sala.jpg” e faça o exercício proposto:<br /> Alinhe a mensagem no topo, no meio e embaixo.<br />Intermediárias 15<br /> Teste os Alinhamentos de <br />Texto em Relação às imagens !<br />MOSTRAR TAREFA 15<br />
  22. 22. Links Internos (Na página) <br />Mini-CursoWebDesign IFPB<br />22<br /><a name = Nome_Ancora> </a><br /><a href=#Nome_Ancora> texto </a><br />Intermediárias 16<br /> Criando links internos<br />MOSTRAR TAREFA 16<br />
  23. 23. Links Locais (Nos Diretórios Locais) <br />Mini-CursoWebDesign IFPB<br />23<br /><a href=“Arquivo.html”> texto </a><br /> <a href=“tarefa17.html” >Voltar </a><br /><a href="tarefa17_Links_Locais.html"><br /><imgsrc= "imagens/botao.png " alt="Voltar Para Menu"><br /></a><br />Intermediárias 17<br /> Criando links internos<br />MOSTRAR TAREFA 17<br />
  24. 24. Links Externos (Na WEB) <br />Mini-CursoWebDesign IFPB<br />24<br /><a href=“http://site.com.br”> Site </a><br />Intermediárias 18<br /> Criando links Externos<br />MOSTRAR TAREFA 18 <br />
  25. 25. Links Externos (Na WEB) <br />Mini-CursoWebDesign IFPB<br />25<br /><a href=“mailto:ender@email”>email</a><br />Intermediárias 19<br /> Criando links Externos<br />MOSTRAR TAREFA 19 <br />
  26. 26. Mini-CursoWebDesign IFPB<br />26<br />HTML Básico<br /> Introdução ao HTML<br />Samuel, Aleksandro e Alessandro<br />22/08<br />
  27. 27. Frames / Criando o Topo<br />Mini-CursoWebDesign IFPB<br />27<br />< hrsize= “valor” Noshadewidth=“valor” align=opção> <br />Intermediárias 20<br /> Criando links Externos<br />MOSTRAR TAREFA 20 <br />
  28. 28. Frames / Criando o Topo<br />Mini-CursoWebDesign IFPB<br />28<br />
  29. 29. Desafio !<br />Mini-CursoWebDesign IFPB<br />29<br />
  30. 30. Frames / Criando o Frame Principal<br />Mini-CursoWebDesign IFPB<br />30<br />< hrsize= “valor” Noshadewidth=“valor” align=opção> <br />Intermediárias 20<br /> Criando links Externos<br />MOSTRAR TAREFA 20 <br />

×