Introdução ao HTML Hypertext Markup Language

Tamanho: px

Começar a partir da página:

Download "Introdução ao HTML Hypertext Markup Language"

Victor Cerveira Aranha
8 Há anos
Visualizações:

1 Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos

2 Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do usuário. Possuem dois formatos: <nome>... </nome> ou <nome> Parâmetros são opcionais e dependem da tag utilizada.

3 Procedimentos 1. Criar um arquivo novo com o bloco de notas e salvar no desktop com a extensão.html 2. Digitar o conteúdo e as tags e depois salvar (CTRL-S), sem sair dobloco de notas. 3. Ir para o deskotp e clicar duas vezes no arquivo salvo. 4. Visualizar no navegador a formatação e o conteúdo digitados. 5. Alternar entre o bloco de notas e o navegador (ALT-TAB) para fazer alterações e visualizar o resultado. 6. Recarregar a página no navegador (F5) para visualizar as alterações. 7. Ao término, fechar o bloco de notas, o navegador, e apagar o arquivo criado do desktop.

4 Estrutura <!DOCTYPE HTML> Define o tipo do documento <html>... </html> Delimita o início e o fim do documento <head>... </head> Delimita o início e o fim do cabeçalho <body>... </body> Delimita o início e o fim do corpo

5 Estrutura <!DOCTYPE HTML> <html> <head>... </head> <body>... </body> </html> Seção HEAD Seção BODY

6 <BODY> Delimita início e fim do corpo do documento. <BODY bgcolor= > <BODY background= > bgcolor = #RRGGBB red green blue yellow pink... background = endereço da imagem ou figura que será usada como pano de fundo da página.

7 <TITLE> Define o título do documento, aquele que é exibido na barra superior do navegador. Deve ser usado dentro do HEAD. <title>... </title>

8 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> </body> </html>

9 <title>exemplo</title> <body bgcolor="#ff0000">

10 Delimita um parágrafo. Cada parágrafo deve estar dentro de e . Deve ser usado dentro do BODY. ... ... align = center left right justify

11 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> demonstração de um parágrafo sem especificação de alinhamento. </body> </html>

12 demonstração de um parágrafo sem especificação de alinhamento.

13 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> Demonstração de um parágrafo alinhado no centro. </body> </html>

14 Demonstração de um parágrafo alinhado no centro.

15 Seleciona cor, tamanho e tipo do fonte. ... color = #RRGGBB size = face = Arial, Helvetica, sans-serif Courier New, Courier, monospace Times New Roman, Times, serif

16 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> Demonstração de um parágrafo. </body> </html>

17 ...

18 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> Demonstração de um parágrafo. </body> </html>

19 ...

20 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> Demonstração de um parágrafo. </body> </html>

21 ...

22 <H1>,..., <H6> Define um título, diferenciando os níveis através dos tamanhos das letras. Deve ser usado dentro do BODY. As tags <H2> até <H6> também são definidas. <H1>... </H1>

23 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> <H1>Título</H1> <H2>Título</H2> <H3>Título</H3> <H4>Título</H4> <H5>Título</H5> <H6>Título</H6> </body> </html>

24 .... <H1>Título</H1> <H6>Título</H6>

25 , <S>, , Selecionam negrito, tachado, itálico e sublinhado, respectivamente. ... <S>... </S> ... ...

26 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> texto texto <s>texto</s> <s>texto</s> </body> </html>

27 texto texto <s>texto</s> <s>texto</s>

28 e <HR> Para inserir linha em branco e inserir uma linha horizontal, respectivamente. <HR>

29 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> primeiro parágrafo segundo parágrafo </body> </html>

31 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> primeiro parágrafo segundo parágrafo </body> </html>

32

33 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> primeiro parágrafo <hr> segundo parágrafo <hr> </body> </html>

34 <hr> <hr>

35 <UL> e <LI> Para inserir uma lista não-ordenada (não numerada). Cada elemento deverá iniciar com a tag <LI> <UL> <LI>... </LI> <LI>... </LI> <LI>... </LI> </UL>

36 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> minhas frutas preferidas: <ul> <li>manga</li> <li>uva</li> <li>melão</li> </ul></body> </html>

37 <ul> <li>manga</li> <li>uva</li> <li>melão</li> </ul>

38 <OL> e <LI> Para inserir uma lista ordenada (numerada). Cada elemento deverá iniciar com a tag <LI> <OL> <LI>... </LI> <LI>... </LI> <LI>... </LI> </OL>

39 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> minhas frutas preferidas: <ol> <li>manga</li> <li>uva</li> <li>melão</li> </ol></body> </html>

40 <ol> <li>manga</li> <li>uva</li> <li>melão</li> </ol>

41 Exercício Criar um código HTML para: Manga Uva o Crimson o Itália o Benitaka Melão

42 <A> Para inserir um link para outro documento. <A href= target= >... </A> href = o endereço da página para a qual se deseja o link. target = _blank _self

43 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> clique <a href=" aqui</a> para acessar a minha escola. </body></html>

44 <a href="

45 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> clique <a href=" target="_blank">aqui</a> para acessar a minha escola. </body></html>

46 <a href= target= _blank >aqui</a>

47 <IMG> Para inserir uma imagem ou figura (JPEG, JPG, GIF, BMP). <IMG align = " src= " height= " width= " hspace= " vspace= > align = left right source = endereço de onde se encontra a figura. height = altura (em pixels) para a figura. width = largura (em pixels) para a figura. hspace = margem a ser deixada nas laterais (em pixels). vspace = margem a ser deixada em cima e embaixo (em pixels).

48 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> <img src="univasf.jpg" height="300"> </body> </html>

49 <img src="univasf.jpg" height="300">

50 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> <img src="univasf.jpg" height="300"> parágrafo de demonstração. </body> </html>

51 parágrafo de demonstração. <img src="univasf.jpg" height="300">

52 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> <img src="univasf.jpg align= left height="300"> nonon nonono nonon </body> </html>

53 nonon nonono nonon <img src="univasf.jpg" align= left height="300">

54 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> nonon nonono nonon <img src="univasf.jpg align= left height="300"> </body> </html>

55 nonon nonono nonon <img src="univasf.jpg" align= left height="300">

56 nonon nonono nonon <img src="univasf.jpg" align= right height="300">

57 <!DOCTYPE HTML> <head> <title>exemplo</title> </head> <body bgcolor="#ff0000"> <img src="univasf.jpg align= left height= 200"> <img src="univasf.jpg align= right height= 200"> nonon nonono nonon </body> </html>

58 nonon nonono nonon <img src="univasf.jpg" align= left height="300"> <img src="univasf.jpg" align= right height="300">

59 <img src="univasf.jpg" align= left height="300 hspace= 20 > <img src="univasf.jpg" align= right height="300 hspace= 20 >

60 nonon nonono nonon

61 Exercício 1. Criar uma página sobre tema de interesse em zootecnia. 2. Inserir imagens e links. 3. Utilizar todos os comandos apresentados.

Documentos relacionados

QUEM FEZ O TRABALHO?

Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome