Pedro Costa Introdução ao HTML 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de...

1Pedro Costa Introdução ao HTML

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

Introdução ao 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.

HTML


Um elemento HTML é constituído preferencialmente por 3 partes Marca(tags) de inicio Conteúdo Marca(tags) de fim

Marcas

<p>html</p>


Marca de inicio é composta por

Marca de inicio

<elemento atributo1=“algo” atributo2=“algo2”>

Os atributos podem ser obrigatórios ou opcionais

Usar sempre minúsculas na escrita das marcas


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

Conteúdo


A marca de fim serve exclusivamente para indicar que o fim do elemento que estamos a utilizar

Usa-se o sinal / Por exemplo:

Marca de fim

</p></table>


Existem elementos HTML que só têm a primeira Marca de inicio

Marcas

<br><img src=“imagem.gif”>


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>


Exemplo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head></head>

<body><p>Primeira página</p>

</body></html>


Cabeçalho

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

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


Elementos do Corpo

Paragrafo e quebra de linhaPará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>ResultadoEm 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.


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.

Resultado

Para inserir

um break

num

paragrafo

usa-se uma marca br.


Elementos do Corpo

CabeçalhosExistem 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>

ResultadoMais Importante

2º mais importanteÚltimo


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çalho 1

Este cabeçalho está centrado em relação ao tamanho de página


Elementos do Corpo

Formatação do textoNegrito 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.


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 bold Este texto está em italico Este texto mais pequeno


Elementos do Corpo

Listas NumeradasLista - <ol>…</ol>

Elemento de uma lista <li>…</li>

Exemplo:

<ol><li>Informatica</li><li>Fotografia</li><li>Video</li></ol>

Resultado1. Informati

ca2. Fotografia3. Video


Elementos do Corpo

Listas NumeradasExemplo: <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>


Elementos do Corpo

Listas não numeradas e sub listasLista - <ul>…</ul>

Elemento de uma lista <li>…</li>

Exemplo:

<ul><li>Informática</li><ul><li>Teórica</li><li>Prática</li></ul><li>Fotografia</li><li>Video</li></ul>

Resultado• Informática

• Teórica• Prática

• Fotografia• Vídeo


Elementos do Corpo

Listas não numeradas e sub listasExemplo:

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


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


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>


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


Elementos do Corpo

Imagens

Imagem - <img src=“caminho e nome da imagem com a extensão”> Exemplo:

<img src=“R01.jpg”>

Resultado

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çõesUsar minúsculas, não usar acentos e espaços nos nomes das imagens


Elementos do Corpo

ImagensExemplo:

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


Elementos do Corpo

TabelasMuitas vezes é usada para estruturar a informaçãoTabela <table>…</table>Linha <tr>…</tr>Celula <td>…</td>

Exemplo: <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>

Resultado

Célula da 1ª linha e 1ª Coluna





Elementos do Corpo

TabelasExemplo:

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

ResultadoEsta tabela tem legenda e borda de 6:

Legenda

100 200 300

400 500 600


Elementos do Corpo

TabelasExemplo:

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

Resultado

Esta tabela tem fundo nas células

primeira linha

segunda linha


Estrutura dos elementos

O elementos têm uma estrutura de encaixe hierárquico, mas não podem ser intercalados

<p>Paragrafo com texto <b>tipo bold</b> texto normal novamente</p>

Correcto

Incorrecto

<p>Texto que não <b> aparece</p> correctamente</b>


Referencias

HTML página de consultaW3C 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

Pedro Costa Introdução ao HTML 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de...

Documents

Transcript of Pedro Costa Introdução ao HTML 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de...