Aula

438 views
368 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
438
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aula

  1. 1. HTML
  2. 2. Introdução ◊ Criando um documento HTML • • • • Menu Iniciar > Programas > Acessórios > Bloco de notas; No Bloco de notas: Arquivo > Salvar como...; Alterar o tipo de arquivo para: Todos os arquivos; Salvar o arquivo com extensão .html;
  3. 3. Edição de Documentos HTML Existem editores HTML chamados WYSIWYG (what you see is what you get – o que você ve é o que você tem). São ambientes de edição com um resultado final das marcações (pois o resultado final depende do browser usado para visitar a página). Alguns bastante conhecidos são o Dreamweaver e o Nvu.
  4. 4. Edição de Documentos HTML
  5. 5. Edição de Documentos HTML Além dos outros editores especificos para HTML. Editores de texto bastante utilizados,como o Word,entre outros, permitem a exportação de seus documentos próprios para o formato HTML (Menu, Salvar como,Salvar_como Tipo).
  6. 6. Introdução ◊ Conceitos básicos sobre HTML • Sigla para HyperText Markup Language (Linguagem de Marcação de Hipertexto); • HTML é a linguagem utilizada na comunicação entre o desenvolvedor de uma página WEB e o navegador (Internet Explorer, Mozilla Firefox, Safari, ...); • A HTML utiliza identificadores que são chamados de TAG. Essas TAGs indicam ao navegador o elemento a ser exibido; • Cada TAG apresenta uma lista de atributos que podem definir as propriedades dos elementos como aparência, tamanho, posição, cores, fontes, etc. ◊ Sintaxe das TAGs • As TAGs são palavras definidas, em inglês, e são escritas entre os sinais ‘<’ e ‘>’;
  7. 7. Introdução ◊ Sintaxe das TAGs • As TAGs são palavras definidas, em inglês, e são escritas entre os sinais ‘<’ e ‘>’; • As TAGs devem ser abertas e fechadas para que o navegador saiba de onde e até onde está definido o elemento. Para se fechar uma TAG é utilizado o sinal ‘/’. Algumas poucas TAGs não necessitam ser fechadas, sendo recomendado a inserção do sinal ‘/’ na TAG de abertura; • Exemplos: <tag> ... </tag> <tag/> - TAG aberta e fechada; - TAG que não precisa ser fechada;
  8. 8. Introdução ◊ Sintaxe das TAGs • Os atributos de uma TAG são inseridos dentro da TAG de abertura e seus valores devem estar entre aspas simples ou dupla. • Exemplos: <tag atr1='prop1'> ... </tag> <tag atr1='prop1' atr2="prop2"/>
  9. 9. TAGs fundamentais ◊ <html> e </html> • Usadas em toda página WEB, são a primeira e a última TAGs a serem inseridas num documento HTML. Entre elas fica escrita toda a página. ◊ <head> e </head> • head (cabeça) é uma TAG de cabeçalho. Nela são inseridas as primeiras configurações da página a serem utilizadas durante a interpretação feita pelo navegador. Algumas dessas configurações são as folhas de estilo, CSS (Cascading Style Sheets), o título da página e scripts de execução; • <title> e </title>  title (título) é a TAG que define o título da página e fica inserida dentro de head.
  10. 10. TAGs fundamentais ◊ <body> e </body> • body (corpo) é a TAG onde ficam escritos todos os elementos visíveis da página: textos, links, imagens, formulários e etc. ◊ Principais atributos de <body> • bgcolor  conjunto de cores: {blue, red, yellow, green, ...};  utilizado para definir a cor de fundo; as cores também podem ser representadas com codificação hexadecimal; o número de cores distintas disponíveis utilizando o sistema RGB (Reb-Green-Blue) de cores (sistema mais simples) supera 16mi. • background  seleciona uma imagem para plano de fundo;  deve ser inserido o endereço da imagem.
  11. 11. Na prática... ◊ Exemplo 1 - código <html> <head> <title>Este é o título</title> </head> <body bgcolor='orange'> Olá. Eu faço parte do corpo da página. </body> </html>
  12. 12. Na prática... ◊ Exemplo 1 - página
  13. 13. Formatação de textos ◊ Quebra de linha e parágrafo • <br> • <p> e </p>  quebra de linha;  parágrafo. ◊ Principal atributo de <p> • align  conjunto de valores: {center, left, right, justify};  utilizado para alinhar um texto;  caso não seja definido, o valor padrão é left.
  14. 14. Na prática... ◊ Exemplo 2 - código <body> Um parágrafo com quebra de linhas alinhado ao centro:<p align='center'>"Quem crer pudera, tempo em fora, no meu verso,<br/>Se o vosso alto valor eu proclamasse nele?<br/>Então – e sabe-o o céu – como em tumba, ao inverso,<br/>Vossa vida aí oculto e o mais que em vós excele.<br/>Dissesse eu o que minha alma em vossos olhos sente,<br/>Vossas graças, fiel, todas enumerasse,<br/>E o futuro diria: Este poeta mente;<br/>Beleza assim não há da terra sobre a face".</p> </body>
  15. 15. Na prática... ◊ Exemplo 2 - página
  16. 16. Formatação de textos ◊ Títulos • • • • • • <h1> <h2> <h3> <h4> <h5> <h6> e e e e e e </h1> </h2> </h3> </h4> </h5> </h6> ◊ Principal atributo • align.  título maior;  título menor.
  17. 17. Na prática... ◊ Exemplo 3 - código <body> <h1>Título 1 (esquerda)</h1> <h2 align='left'>Título 2 (esquerda)</h2> <h3 align='center'>Título 3 (centro)</h3> <h4 align='center'>Título 4 (centro)</h4> <h5 align='right'>Título 5 (direita)</h5> <h6 align='right'>Título 6 (direita)</h6> </body>
  18. 18. Na prática... ◊ Exemplo 3 - página
  19. 19. Formatação de textos ◊ Formatações gerais • • • • <b> e </b> <i> e </i> <u> e </u> <s> e </s> • <font> e </font>     negrito; itálico; sublinhado; riscado;  define propriedades da fonte como, tamanho, cor, fundo. ◊ Principais atributos de <font> • size  conjunto de tamanhos: {1, ..., 7}, sendo 1 o menor tamanho;  utilizado para definir o tamanho do texto; • color  mesmo conjunto de cores do atributo bgcolor;  utilizado para definir a cor da letra.
  20. 20. Na prática... ◊ Exemplo 4 - código <body> <h4>Formatações gerais:</h4> Negrito: <b>texto</b><br/> Itálico: <i>texto</i><br/> Sublinhado: <u>texto</u><br/> Riscado: <s>texto</s><br> <font color='red' size='2'>Vermelho tamanho 2</font><br/> <font color='#0000FF' size='5'>Azul tamanho 5</font> </body>
  21. 21. Na prática... ◊ Exemplo 4 - página
  22. 22. Trabalhando com figuras ◊ Inserção • <img>  insere uma figura. ◊ Principais atributos • • • • • align; src border height width     indica onde está a imagem; define a espessura da borda; define a altura; define a largura.
  23. 23. Na prática... ◊ Exemplo 5 - código <body background='fundo_exemplo.jpg'> <img src='imagem/sol.jpg' border='2px'/> <img src='imagem/sol.jpg' height='100px' width='200px;'/> <img src='imagem/sol.jpg' height='150px'/> </body>
  24. 24. Na prática... ◊ Exemplo 5 - página
  25. 25. Organização dos elementos ◊ Listas • <ul> e </ul>  lista não-ordenada (Unordered List); • <ol> e </ol>  lista ordenada (Ordered List); • <li> e </li>  item da lista (List Item);  deve ser utilizado dentro da ol ou da ul. ◊ Principal atributo das listas • type  conjunto de tipos: {1, a, A, i, I, circle, disc, square};  utilizado para definir o marcador a ser utilizado na lista;  a TAG ol utiliza apenas os valores {1, a, A, i, I};  a TAG ul utiliza apenas os valores {circle, disc, square};  a TAG li utiliza qualquer um dos tipos apresentados.  pode-se usar o type como none para que não mostre nenhum marcador.
  26. 26. Na prática... ◊ Exemplo 6 - código <ol type='i'> <li>Cores: <ul type='square'> <li>Vermelho</li> <li>Verde</li> <li>Azul</li> </ul> </li> <li>Símbolos <ul> <li>Quadrado</li> <li type='disc'>Triângulo</li> <li>Ponto</li> </ul> </li> </ol>
  27. 27. Na prática... ◊ Exemplo 6 - página
  28. 28. Organização dos elementos ◊ Tabelas • • • • <table> e </table> <tr> e </tr> <td> e </td> <th> e </th>     tabela; linha da tabela (Table Row); célula (Table Data Cell); célula cabeçalho (Table Header Cell). ◊ Principais atributos de <table> • border, width, bgcolor, background. ◊ Principais atributos de <tr> • align, bgcolor; • valign  alinha o conteúdo do elemento verticalmente;  conjunto de valores: {bottom, middle, baseline, top}.
  29. 29. Organização dos elementos ◊ Principais atributos de <td> e <th> • align, valign, bgcolor, background; • colspan  define a quantidade de colunas ocupadas pela célula.
  30. 30. Na prática... ◊ Exemplo 7 - código <table border='1px'> <tr> <th colspan='3'>Dados</th> </tr> <tr> <th>Nome</th> <th>Sobrenome</th> <th>Idade</th> </tr> <tr> <td>Fernanda</td> <td>Diniz Santana</td> <td>22</td> </tr> </table>
  31. 31. Na prática... ◊ Exemplo 7 - página
  32. 32. Organização dos elementos ◊ Atributos de espaçamento de <table> • cellspacing • cellpadding  define o espaço entre as células de uma tabela;  define o espaço entre o conteúdo de uma célula e sua borda.
  33. 33. Na prática... ◊ Exemplo 8 - código <table border='1px' cellspacing='60px' cellpadding='20px'> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula 3</td> <td>Célula 4</td> </tr> </table>
  34. 34. Na prática... ◊ Exemplo 8 - página
  35. 35. Estruturação da página ◊ Frames • <frameset> e </frameset>  define a disposição dos frames (quadros) na página; * Não pode ser usado junto com a tag body; • <frame> e </frame>  cria um frame;  deve ser usado dentro da tag frameset. ◊ Principais atributos de <frameset> • border; • cols  define quantas colunas conterão frames, informando suas larguras respectivamente.
  36. 36. Estruturação da página ◊ Principais atributos de <frame> • src; • name  define um nome para o elemento; • frameborder  define se o frame terá borda ou não;  conjunto de valores: {no, yes}; • noresize  matém fixo o tamanho do frame.
  37. 37. Na prática... ◊ Exemplo 9 - código <html> <head> <title>Título</title> </head> <frameset cols='30%,55%,15%' border='5px'> <frame name='frame1' src='pagina1.html' frameborder='no' noresize/> <frame name='frame2' src='pagina2.html' frameborder='no'/> <frame name='frame3' src='pagina3.html'/> </frameset> </html>
  38. 38. Na prática... ◊ Exemplo 9 – código de pagina1.html <html> <head> <title>Título</title> </head> <body bgcolor='orange'> Página 1<br/> Laranja </body> </html>
  39. 39. Na prática... ◊ Exemplo 9 – código de pagina2.html <html> <head> <title>Título</title> </head> <body bgcolor='blue'> Página 2<br/> Azul </body> </html>
  40. 40. Na prática... ◊ Exemplo 9 – código de pagina3.html <html> <head> <title>Título</title> </head> <body bgcolor='yellow'> Página 3<br/> Amarelo </body> </html>
  41. 41. Na prática... ◊ Exemplo 9 - página
  42. 42. Estruturação da página ◊ Frames • <iframe> e </iframe>  tag que permite inserir frames dentro da tag body;  uma vez que não se pode utilizar frameset junto com body deve-se usar iframe quando precisar inserir algum frame em body. ◊ Principais atributos de <iframe> • frameborder, height, name, src, width.
  43. 43. Na prática... ◊ Exemplo 10 – código <body> <table width='700px' border='1px'> <tr height='300px'> <td width='150px' valign='top'> Fora do frame! </td> <td> <iframe src='pagina1.html' width='100%' height='100%' frameborder='no'></iframe> </td> </tr> </table> </body>
  44. 44. Na prática... ◊ Exemplo 10 - página
  45. 45. Interatividade da página ◊ Link • <a> e </a>  tag que permite inserir links ná página;  com esta tag torna-se possível a navegação em uma página web. ◊ Principais atributos de <a> • href • target  indica a página ou arquivo a ser aberto;  indica aonde a página ou arquivo deve ser aberto;  conjunto de valores: {_self, _blank, *}.
  46. 46. Na prática... ◊ Exemplo 11 – código <table width='700px' border='1px'> <tr height='300px'> <td width='150px' valign='top'> <a href='pagina1.html' target='meuFrame'>Página 1</a><br/> <a href='paginaLink.html' target='meuFrame'>Página com link</a> </td> <td> <iframe name='meuFrame' src='pagina1.html' width='100%' height='100%' frameborder='no'></iframe> </td> </tr> </table>
  47. 47. Na prática... ◊ Exemplo 11 – código de paginaLink.html <html> <head> <title>Título</title> </head> <body> <a href='pagina3.html' target='_self'> Abrir página 3 </a> </body> </html>
  48. 48. Na prática... ◊ Exemplo 11 - página
  49. 49. HTML 5
  50. 50. Definição O HTML5 é a nova versão do HTML4 Esta nova versão traz consigo importantes mudanças quanto ao papel do HTML no mundo da Web, através de novas funcionalidades como semântica e acessibilidade. Com novos recursos, antes só possíveis por meio de outras tecnologias. Sua essência tem sido melhorar a linguagem com o suporte para as mais recentes multimídias, enquanto a mantém facilmente legível por seres humanos e consistentemente compreendida por computadores e outros dispositivos (navegadores, parsers, etc). O HTML5 será o novo padrão para HTML, XHTML, e HTML DOM.
  51. 51. Referência http://www.w3c.br/pub/Cursos/CursoHTML5/htm http://www.linhadecodigo.com.br/artigo/81/ht ml-b%C3%A1sico.aspx http://www.criarweb.com/html/ http://pt-br.html.net/tutorials/html/ http://codigofonte.uol.com.br/videos/htmlxhtml/ http://www.extremaonline.com/html.html

×