1 / 30

Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media

Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao HTML. HTML. Linguagem usada nas páginas da web Documentos escritos em ASCII- texto Cada página é um ficheiro que tem a extensão .htm ou .html

gaia
Download Presentation

Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao HTML

  2. HTML • Linguagem usada nas páginas da web • Documentos escritos em ASCII- texto • Cada página é um ficheiro que tem a extensão .htm ou .html • O nome do ficheiro tem de ser em minúsculas, sem acentos e sem espaços.

  3. Marcas • Um elemento HTML é constituído preferencialmente por 3 partes • Marca(tags) de inicio • Conteúdo • Marca(tags) de fim <p>html</p>

  4. Marca de inicio • Marca de inicio é composta por <elemento atributo1=“algo” atributo2=“algo2”> Os atributos podem ser obrigatórios ou opcionais Usar sempre minúsculas na escrita das marcas

  5. Conteúdo • Conteúdo é basicamente o texto que aparece nas páginas • pode ser escrito em português, com maiúsculas, minúsculas, acentos e espaços

  6. Marca de fim • A marca de fim serve exclusivamente para indicar que o fim do elemento que estamos a utilizar • Usa-se o sinal / • Por exemplo: </p> </table>

  7. Marcas • Existem elementos HTML que só têm a primeira • Marca de inicio <br> <img src=“imagem.gif”>

  8. Estrutura de uma página DOCTYPE – define a versão do HTML que estamos a trabalhar Por defeito pomos a última mais usada <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Definição de inicio e fim de uma página HTML - <html>…</html> Dentro da página temos duas secções: Cabeçalho: <head>…</head> Corpo ou Conteúdo: <body>…</body>

  9. Exemplo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <p>Primeira página</p> </body> </html>

  10. Cabeçalho • Titulo que aparece em cima - <title>…</title> • As Metas dão informações das mais variadas espécies • Tipo de conteúdos e de linguagem • Autor • Descrição da página • Keywords <HEAD><META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1"><TITLE>Tecnologia dos Media</TITLE><META NAME="Author" CONTENT=“Pedro Costa"><META NAME="Description" CONTENT=“Página da disciplina"><META NAME="KeyWords" CONTENT=“informatica,computadores"></HEAD>

  11. Elementos do Corpo Paragrafo e quebra de linha Parágrafos: delimitam blocos de informação - <p>…</p> Quebra de linha: <br> - Elemento que não precisa de marca do fim Exemplo: <p> Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 horas semanais.<br> Dividida em 6 para Informática e 2,5 para as restantes.</p> Resultado Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informática e 2,5 para as restantes.

  12. Elementos do Corpo Paragrafo e quebra de linha Exemplo: <p> Para inserir<br>um break<br>num<br>paragrafo,<br>usa-se a marca br. Para inserir um break num paragrafo usa-se uma marca br. Resultado

  13. Elementos do Corpo Cabeçalhos Existem 6 níveis de cabeçalhos , desde o mais importante <h1> até ao menos <h6>. Exemplo: <h1>Mais importante</h1> <h2>2º mais importante</h2> <h6>Último </h6> Resultado Mais Importante 2º mais importante Último

  14. Elementos do Corpo Cabeçalhos Exemplo: <h1 align="center">Este é o cabeçalho 1</h1> <p>Este cabeçalho está centrado em relação ao tamanho da página.</p> Resultado Este é o cabeçalho1 Este cabeçalho está centrado em relação ao tamanho de página

  15. Elementos do Corpo Formatação do texto Negrito ou bold - <b>…</b> Italico - <i>…</i> Sublinhado - <u>…</u> Exemplo: <p> Em TM temos três áreas: <b>Informática, Fotografia e Vídeo</b>. A disciplina tem <i>11 horas semanais</i>.<br> Dividida em 6 para <u>Informática</u> e 2,5 para as restantes.</p> Resultado Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informática e 2,5 para as restantes.

  16. Elementos do Corpo Formatação do texto Exemplo: <b>Este texto está em bold</b> <br> <i> Este texto está em italico </i> <br> <small> Este texto mais pequeno </small> Resultado Este texto está em boldEste texto está em italico Este texto mais pequeno

  17. Elementos do Corpo Listas Numeradas Lista - <ol>…</ol> Elemento de uma lista <li>…</li> Resultado Exemplo: <ol><li>Informatica</li> <li>Fotografia</li> <li>Video</li> </ol> • Informatica • Fotografia • Video

  18. Elementos do Corpo Listas Numeradas Exemplo: <font size=1> <h4>Lista numeradas:</h4> <ol> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> <h4>Lista com letras:</h4> <ol type="A"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> <h4>Lista com letras minusculas:</h4> <ol type="a"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> <h4>RLista com numeros romanos:</h4> <ol type="I"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> <h4>Lista com numeros romanos minusculos:</h4> <ol type="i"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> </font>

  19. Elementos do Corpo Listas não numeradas e sub listas Lista - <ul>…</ul> Elemento de uma lista <li>…</li> Resultado Exemplo: <ul><li>Informática</li> <ul><li>Teórica</li> <li>Prática</li></ul> <li>Fotografia</li> <li>Video</li> </ul> • Informática • Teórica • Prática • Fotografia • Vídeo

  20. Elementos do Corpo Listas não numeradas e sub listas Exemplo: <h4>Lista com discos:</h4> <ul type="disc"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> <h4>Lista com circulos:</h4> <ul type="circle"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> <h4>Lista com quadrados;</h4> <ul type="square"> <li>Maças</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul>

  21. Elementos do Corpo Hiperligações Fazem a ligação a outros documentos <a href=”documento”>…</a> Exemplo: <p>O site da disciplina Tm na área de informática é <a href=http://moodle.fe.up.pt>no moodle da feup</a></p> Resultado O site da disciplina Tm na área de informática é moodle da feup

  22. Elementos do Corpo Hiperligações internas Quando queremos fazer ligações a outros ficheiros no mesmo sitio. • Exemplo: • Ligação de um ficheiro que está em w:\tm\ficheiro1.htm para um que está em w:\tm\ficheiro2.htm • <a href=“ficheiro2.htm>…</a> • Ligação de um ficheiro que está em w:\tm\ficheiro1.htm para um que está em w:\tm\teorica\ficheiro2.htm • <a href=“teorica/ficheiro2.htm>…</a> • Ligação de um ficheiro que está em w:\tm\ficheiro1.htm para um que está em w:\hj\ficheiro2.htm • <a href=“../hj/ficheiro2.htm>…</a>

  23. Elementos do Corpo Hiperligações internas • Exemplo: • <a href="lastpage.htm"> Este texto</a> é um link para uma página chamada lastpage.htm. </p> <p> <a href="http://www.google.com/"> Este texto</a> é um link para a página do google </p> Resultado: Este texto é um link para uma página chamada lastpage.htm.. Este texto é um link para a página do google

  24. Elementos do Corpo Imagens Imagem - <img src=“caminho e nome da imagem com a extensão”> Exemplo: Ter em atenção que o caminho e o nome do ficheiro da imagem tem de ser escrito partindo do ponto de partida do documento Ou seja se a imagem estiver na directoria do documento HTML só se escreve o nome do ficheiro. Se estiver noutra directoria temos de seguir os mesmo cuidados que nas hiperligações <img src=“R01.jpg”> Resultado Usar minúsculas, não usar acentos e espaços nos nomes das imagens

  25. Elementos do Corpo Imagens Exemplo: <p> Uma imagem com o tamanho real: <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" > </p> <p>Uma imagem com 48 pixeis de comprimento e 48 pixeis de altura <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" width="48" height="48"> </p> <p>Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" width="148" height="48"> </p>

  26. Elementos do Corpo Tabelas Muitas vezes é usada para estruturar a informação Tabela <table>…</table> Linha <tr>…</tr> Celula <td>…</td> Exemplo: Resultado <table border=“2”> <tr> <td>Célula da 1ª linha e 1ª Coluna</td> <td>Célula da 1ª linha e 2ª Coluna</td> </tr> <tr> <td>Célula da 2ª linha e 1ª Coluna</td> <td>Célula da 2ª linha e 2ª Coluna</td> </tr> </table>

  27. Elementos do Corpo Tabelas Exemplo: Resultado Esta tabela tem legenda e borda de 6: <h4> Esta tabela tem legenda e borda de 6: </h4> <table border="6"> <caption>Legenda</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> Legenda

  28. Elementos do Corpo Tabelas Exemplo: Resultado Esta tabela tem fundo nas células <h4>Esta tabela tem fundo nas celulas</h4> <table border="1"> <tr> <td bgcolor="red">primeira</td> <td>linha</td> </tr> <tr> <td background="3dm-overall.gif"> segunda</td> <td bgcolor="yellow">linha</td> </tr> </table>

  29. Estrutura dos elementos O elementos têm uma estrutura de encaixe hierárquico, mas não podem ser intercalados Correcto <p>Paragrafo com texto <b>tipo bold</b> texto normal novamente</p> Incorrecto <p>Texto que não <b> aparece</p> correctamente</b>

  30. Referencias HTML página de consulta W3C HTML Home Page, W3C Especificação da HyperText Markup Language 4.01, W3C Lista de elementos HTML, W3C Lista de atributos HTML, W3C HyperText Markup Language, WaSP

More Related