Apostila html

477 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
477
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Apostila html

  1. 1. HTML MultimídiaProf.: Fernanda
  2. 2. IntroduçãoHyper Text Markup LanguageÉ a linguagem básica da InternetUtilizaremos o Bloco de Notas (Notepad)(Iniciar/Programas/Acessórios/Bloco deNotas)Todos os arquivos deverão ser salvoscom a extensão .html
  3. 3. Exemplo 1A estrutura de um documento HTML apresenta os seguintes componentes: <HTML><HEAD><TITLE>PRIMEIRO EXEMPLO</TITLE></HEAD><BODY>texto,imagem,links, ... </BODY></HTML>
  4. 4. CabeçalhosHá 6 níveis de cabeçalho em HTML, de <h1> a <h6>Exemplo: <H1>Este é um cabeçalho de nível 1</H1> <H2>Este é um cabeçalho de nível 2</H2> <H3>Este é um cabeçalho de nível 3</H3> <H4>Este é um cabeçalho de nível 4</H4> <H5>Este é um cabeçalho de nível 5</H5> <H6>Este é um cabeçalho de nível 6</H6>
  5. 5. SeparadoresQuebra de linha: usamos o elemento <br>Parágrafo: usamos o elemento <p>Exemplo:Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo 1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2, <br>linha 2 do parágrafo 2.
  6. 6. ALINHAMENTOS <P> tem atributo de alinhamento, como os cabeçalhos:Exemplo:<P ALIGN=CENTER>Assim como os trens, as boas idéias às vezes chegam com atraso. <BR>(Giovani Guareschi)</P> <P ALIGN=RIGHT>Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.</P><P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.</P>
  7. 7. Linha Horizontal <HR> insere uma linha horizontal HR SIZE=7> insere uma linha de largura 7 (pixels)<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível <HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional
  8. 8. ListasListas não numeradas:<UL><LI>item de uma lista<LI>item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto<LI>item</UL>
  9. 9. ListasEssa lista pode ter marcadores diferentes,indicados através do atributo TYPE, que assumeos valores CIRCLE, SQUARE e DISC (default):<UL TYPE=CIRCLE><LI>um item<LI>mais um item</UL>
  10. 10. ListasListas Numeradas<OL><LI>item de uma lista numerada<LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto<LI>item de lista numerada</OL>
  11. 11. Formatação de textos<B> Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado)<I> Itálico (em alguns casos, caracteres inclinados)<U> Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links.
  12. 12. Formatação de textos
  13. 13. Cores e TamanhosIntroduzidos através dos elementos fontCores:<FONT COLOR="#rrggbb">Texto</FONT>Tamanho:<FONT SIZE=tamanho_da_letra>Texto</FONT>Exemplo:<FONT SIZE=+2>Letra maior</FONT>Letra normal<FONT SIZE=-2>Letra menor</FONT>
  14. 14. FontesUtilizamos o atributo face para o tipo de fonte:Exemplo:<FONT FACE="Verdana" COLOR="#0000AA">Fonte Verdana azul</FONT><FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</FONT><FONT FACE="Courier New" COLOR="#AA0000">Fonte Courier New vermelha</FONT>
  15. 15. Atributos de body Cor de fundo: <body bgcolor=#6600FF> Imagem de fundo: <body background=#6600FF>
  16. 16. MarqueeÉ possível obter o efeito de animação de texto, através da formatação<MARQUEE>Exemplo: <MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>
  17. 17. Ligações (uso de links) <a href="arquivo.extenção">TextoLink</a> ou < a href="http://www.google.com.br">Google</a> Para imagens<a href="arquivo.html"><img src="imagem.gif"></a>
  18. 18. Imagens É necessário o uso da extensão da imagem para ser mostrada! <img src="imagem.jpg"> Para ajuste de tamanho utilizam- se dois parâmetros ex: <img src=“Inverno.jpg” width=100 height=100>*O tamanho da imagem fica a seu critério, neste caso é 100 pixels de largura, e 100 pixels de altura.
  19. 19. Tabela simples <table border=1> <tr> <td>coluna 1, linha 1</td> <td>coluna 2, linha 1</td> </tr> <tr> <td>Coluna1, linha 2</td> <td>Coluna 2, linha 2</td> </tr> </table>
  20. 20. Frames É a divisão do navegador em janelas ex:
  21. 21. Frames As 3 páginas deverão ser construídas em separado. Para juntá-las não usaremos o comando <body> mas usaremos o seguinte programação:
  22. 22. Junção das Páginas (Frames)<html> O atributo rows<head> corresponde as<title>Frames</title> linhas divisórias da pagina</head><frameset rows=“15%,*,75” border=1> <frame src=“pagina1.html”> <frame src=“pagina2.html”> <frame src=“pagina3.html”></frameset:</html>
  23. 23. Trabalho Frames Criar uma página toda em html Produto Descrição Preço onde haja 3 páginas no mesmo corpo. O site será sobre produtos para Placa-mãe R$500,00 computadores. No 1º frame será o nome da loja. No 2º frame deverá ser mostrada uma tabela, com a imagem dos produtos (todas do mesmo tamanho), a descrição do produto e o preço. Exemplo ao lado: No 3º frame deverá ser feito um menu com 3 opções, sendo elas Contato, Clube do Hardware, Equipe de desenvolvimento do site.

×