pedro costa introdução ao html 1 curso de jornalismo e ciências da comunicação disciplina de...
Post on 17-Apr-2015
135 Views
Preview:
TRANSCRIPT
1Pedro Costa Introdução ao HTML
Curso de Jornalismo e Ciências da ComunicaçãoDisciplina de Tecnologia dos Media
Introdução ao HTML
2Pedro Costa 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
3Pedro Costa Introdução ao HTML
Um elemento HTML é constituído preferencialmente por 3 partes Marca(tags) de inicio Conteúdo Marca(tags) de fim
Marcas
<p>html</p>
4Pedro Costa Introdução ao HTML
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
5Pedro Costa Introdução ao HTML
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
6Pedro Costa Introdução ao HTML
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>
7Pedro Costa Introdução ao HTML
Existem elementos HTML que só têm a primeira Marca de inicio
Marcas
<br><img src=“imagem.gif”>
8Pedro Costa Introdução ao HTML
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>
9Pedro Costa Introdução ao HTML
Exemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head></head>
<body><p>Primeira página</p>
</body></html>
10Pedro Costa Introdução ao 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
11Pedro Costa Introdução ao HTML
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.
12Pedro Costa Introdução ao HTML
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.
13Pedro Costa Introdução ao HTML
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
14Pedro Costa Introdução ao HTML
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
15Pedro Costa Introdução ao HTML
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.
16Pedro Costa Introdução ao HTML
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
17Pedro Costa Introdução ao HTML
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
18Pedro Costa Introdução ao HTML
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>
19Pedro Costa Introdução ao HTML
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
20Pedro Costa Introdução ao HTML
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>
21Pedro Costa Introdução ao HTML
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
22Pedro Costa Introdução ao HTML
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>
23Pedro Costa Introdução ao HTML
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
24Pedro Costa Introdução ao HTML
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
25Pedro Costa Introdução ao HTML
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>
26Pedro Costa Introdução ao HTML
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
Célula da 1ª linha e 2ª Coluna
Célula da 2ª linha e 1ª Coluna
Célula da 2ª linha e 2ª Coluna
27Pedro Costa Introdução ao HTML
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
28Pedro Costa Introdução ao HTML
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
29Pedro Costa Introdução ao HTML
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>
30Pedro Costa Introdução ao HTML
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
top related