HTML. HyperText Markup Language. Elaborado por Marco Soares

Tamanho: px

Começar a partir da página:

Download "HTML. HyperText Markup Language. Elaborado por Marco Soares"

Gonçalo Rios
5 Há anos
Visualizações:

1 HTML HyperText Markup Language 1

2 HTML É uma linguagem de marcação utilizada para produzir páginas web As páginas web ou documentos html podem ser interpretados por navegadores web/browsers tais como Google Chrome Mozilla Firefox Internet Explorer 2

3 HTML Através do HTML conseguimos criar hipertexto Através de hipertexto podemos ter imagens, texto formatado, sons, vídeos e hiperligações que ligam as páginas entre si 3

4 Tags Através de HTML podemos marcar por exemplo, partes como sendo títulos, parágrafos Estas marcas são as tags As tags são como que instruções que dizem aos navegadores web como devem apresentar as páginas A maior parte das tags é composta pela tag de abertura e tag de fecho Cada tag está contida entre os sinais de maior e menor < > 4

5 Tags Normalmente a tag de fecho é igual à tag de abertura, a única diferença é a / Veja o exemplo de uma tag de abertura e outra de fecho <body> documento - tag de abertura do corpo do </body> - tag de fecho do corpo do documento 5

6 Tags Veja o exemplo duma instrução em HTML Neste caso utiliza-se a tag e tudo o que está dentro fica formatado a negrito (o b vem do inglês bold que significa negrito) o que eu quero dizer em html 6

7 Tags Veja o resultado em um navegador web o que eu quero dizer em html Repare que o que está dentro da tag fica a negrito 7

8 Tags dentro de tags Vamos agora ver um exemplo de uma tag de html dentro de outra tag html Neste caso, tudo fica sublinhado através da tag (underlined) e uma parte dentro fica também a negrito através da tag o que eu quero dizer em html 8

9 Tags dentro de tags Veja o resultado em um navegador web o que eu quero dizer em html 9

10 Começar a utilizar o html através dum editor de texto Para começarmos a utilizar o html vamos descarregar uma versão portável do programa: notepad++ Descarregue-o daqui: able 10

11 Notepad++ 11

12 Notepad++ Depois clique em cima do executável que descarregou 12

13 Notepad++ Após executar o programa notepad++, aparece a janela 13

14 Estrutura dum documento html Vamos criar a estrutura dum documento html através do notepad++, mas antes vamos entender a estrutura Pode-se considerar um documento html como sendo dividido em duas partes O cabeçalho (head) O corpo (body> 14

15 Estrutura dum documento html 15

16 Estrutura dum documento html O cabeçalho do documento define informações acerca do próprio documento, tal como o título ou as relações com outros documentos O corpo do documento contém informações e instruções de como este deve ser mostrado pelo browser As tags <html> e </html> servem para indicar ao browser onde começa e termina um documento em html 16

17 Estrutura dum documento html As tags <body> e </body> delimitam o corpo do documento Estas contêm as tags e o texto que formam o conteúdo principal da página web, por exemplo, cabeçalhos, parágrafos, listas, imagens e hiperligações, entre outros 17

18 Utilizando o notepad++ para criar um documento em html Dentro do notepad vamos inserir a estrutura do código html 18

19 Utilizando o notepad++ para criar um documento em html Vamos usar uma tag para mostrar texto no formato cabeçalho1 (heading 1) De forma a organizar melhor o código, utilize a tecla TAB para afastar a tag <h1> 19

20 Utilizando o notepad++ para criar um documento em html Vamos agora guardar o documento 20

21 Utilizando o notepad++ para criar um documento em html Guarde-o no ambiente de trabalho ou nos documentos Escolha o tipo HyperTest Markyp Language file 21

22 Utilizando o notepad++ para criar um documento em html Para ver o resultado, pode abrir o documento no local onde guardou ou chamá-lo diretamente através do notepad++ 22

23 Tags elementares O HTML tem seis níveis de cabeçalhos, identificados com as tags H1, H2 H6, do maior para o menor tamanho Volte a usar a tecla TAB para organizar o código Experimente: 23

24 Tags elementares Vamos ver o resultado, repare que pode escolher qual o navegador que deseja utilizar para ver 24

25 Tags elementares Repare que existe um problema com os acentos, mais tarde vamos resolver esse problema 25

26 Tags elementares Para criarmos parágrafos normais, utilizamos a tag Experimente: 26

27 Vamos ver como fica no Navegador 27

28 Adicionar título através da tag <title> Vamos agora adicionar um título à página através da tag <title> que fica no <head> 28

29 Adicionar título através da tag <title> Repare que ao ver no navegador web, aparece o título em cima 29

30 Resolver problemas dos acentos e carateres especiais Vamos colocar uma tag que faz com que os navegadores entendam o tipo de caracteres utilizados em Portugal <meta http-equiv="content-type" content="text/html; charset=utf-8"> 30

31 Resolver problemas dos acentos e carateres especiais Veja agora o resultado 31

32 Quebra de linha através da tag Vamos experimentar a utilizar quebras de linha através da tag Cada faz saltar uma linha 32

33 Quebra de linha através da tag Veja o resultado: 33

34 Criar uma linha horizontal através da tag <hr> 34

35 Criar uma linha horizontal através da tag <hr> 35

36 Criar hiperligações através da tag <a> As hiperligações permitem criar ligações para outras páginas internas ao site, ou partes dentro da própria página ou ainda para outro site 36

37 Criar hiperligações através da tag <a> Vamos ver o resultado, repare que ao clicar na hiperligação escola, salta para o site da escola da Povoação 37

38 Criar hiperligações através da tag <a> Vamos examinar a tag anterior Utiliza-se o atributo href para se colocar em seguida depois do igual, para onde se pretende ir ao clicar na hiperligação Começa com <a> e acaba com a tag de fecho </a> Dentro das tags fica o que irá aparecer na hiperligação, neste caso, Escola 38

39 Mais exercícios Ex1) Faça uma página em html com hiperligações para e e Deverá ficar assim: 39

40 Mais exercícios Ex2) Descubra como inserir uma imagem através de html 40

41 Mais exercícios Ex3) Descubra como Colocar uma hiperligação na própria imagem para o site: 41

42 Mais exercícios Experimente alguns exemplos colocados neste site: 42

Documentos relacionados

3. Construção de páginas web Introdução ao HTML

3. Construção de páginas web Introdução ao HTML 3. Construção de páginas web 3.1. Introdução ao HTML 1 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido para especificar a organização lógica de um documento com extensões de hipertexto,