Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html básico

1,072 views

Published on

  • Be the first to comment

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 />

×