Universidade do Vale do Para

1
Universidade do Vale do ParaíbaColégio Técnico
Antônio Teixeira FernandesDisciplina Programação
p/ Web.

• Material I-Bimestre
• - Marcadores HTML
• Site http//www1.univap.br/wagner
• Prof. Responsável
• Wagner Santos C. de Jesus
• Roberto Cordeiro Walts

2
Introdução ao HTML

• A linguagem html vem a ser uma ferramenta
• que possibilita que os desenvolvedores da
• World Wide Web(WWW) ou rede larga
• Mundial possam criar recursos de multimídia
• em seus trabalhos fazendo propaganda e
• passando informações de maneira fácil e
• produtiva aos usuário da rede.

3
Tipos de Redes quanto ao tamanho

• LAN - Local Area NetWork (Redes Locais de
  Pequeno Porte)
• CAN - Campus Area NetWork (Redes Locais de Médio
  Porte)
• WAN - Web Area NetWork (Redes de Grande Porte
  Internet)

4
Protocolo TCP/IP - (Protocolo de Controle de
Transmissão/Protocolo de Internet)

• Uma página criada em HTML utiliza os
• recurso do protocolo http que permite com
• que as página hospedadas em um servidor
• possam ser transmitidas ao cliente que solicita
• a página.

5
(No Transcript)
6

• Http cujo significado vem a ser Hipertext
  Transfer Protocol(Protocolo de Transferencia de
  Hipertexto).
• HTML - que o significado vem a ser HiperText
  Markup Language ( Linguagem de Marcação de
  Hipertexto) criada para ser um meio de
  comunicação simples barato e de fácil
  transmissão.

7

• Principais elementos de uma Página são
• Imagem
• Link
• Título
• Texto

8
Comandos HTML e sua Estrutura Básica.

• ltgt - Marcador HTML (tag) - como chamamos um
  marcador.
• Toda Instrução HTML deve vir entre os
• símbolos de maior e menor. Isso fará com que
• o browser(Navegador) saiba o que ele tem que
• fazer deve ser diferente do que deve ser
• escrito na página.

9
Estrutura de uma Página (HTML). Exemplo

• ltHtmlgt
• ltHeadgt
• ltTitlegt Titulo da Pagina
• lt/Titlegt
• lt/Headgt
• ltBodygt
• ltCorpo da Páginagt
• lt/Bodygt
• lt/Htmlgt

10

• Obs Todo Arquivo para ser executado em
• um Browser deverá Ter a extensão (HTM
• ou HTML)

11
Marcadores Básicos (HTML)

• ltHrgt - cria um traço na página.
• Exemplo lthrgt
• Saída _____________________________

12

• ltBgt - Aplica o estilo Negrito
• Exemplo ltBgtBananalt/Bgt
• Saída Banana

13

• ltIgt - Aplica o estilo Itálico.
• Exemplo ltIgt Laranja lt/Igt
• Saída Laranja

14
ltUgt - Aplica um sublinhado (Não funciona em
todos os Browsers)

• Exemplo ltUgt Texto Bonito lt/Ugt
• Saída Texto Bonito

15
ltPregt - Esse comando permite cria uma
tabulação manual no texto fazendo com seutexto
sai exatamente no local desejado.

• Exemplo ltPregt Hoje Não Houve
  Aula lt/Pregt
• Saída Hoje
  Não Houve Aula
• Obs Serão considerados os espaços a
• esquerda e a direita.

16

• ltH?gt - Permite aumetar ou diminuir o tamanho da
  letra na página.
• Onde (?) vem a ser um número de 1 à 6 que
  determina o tamanho da letra 1 a maior letra e 6
  a menor letra.
• Exemplo ltH1gt Letras lt/H1gt
• Saída Letras

17

• ltCentergt - Centraliza um texto marcado.
• Exemplo ltCentergt Lista de Exercício lt/Centergt
• Saída Lista de Exercício

18

• ltFontgt - Determina o tipo tamanho e cores das
  letras.
• Exemplo
• ltfont size "8" Face "Arial" color "red"gt
  Letra Vermelha lt/Fontgt
• Saída Letra Vermelha

19
(No Transcript)
20

• ltBRgt - Permite saltar uma linha em branco.
• Exmplo Oi Gente ltBRgt Tudo Bem
• Saída
• Oi Gente
• Tudo Bem

21
Criando um Link - Vem a ser o processo de
ligação de uma página com uma outra local ou não.

• ltA Href gt - Esse comando permite criar um link
  com usuários através de uma página.
• Exemplo
• ltA Href "http//www.univap.br" gt Site Univap
  lt/Agt
• Saída Site Univap

22

• Marcadores de Lista trabalham em conjunto.
• ltULgt - Cria uma Lista não Ordenada.
• ltLIgt - Cria um elemanto da lista.
• ltOLgt - Cria uma lista ordenada.

23

• Exemplo
• ltULgt
• ltLIgt Capítulo - 1
• ltLIgt Capítulo - 2
• ltLIgt Capítulo - 3
• lt/ULgt

24

• Saída
• Capítulo - 1
• Capítulo - 2
• Capítulo - 3

25

• ltOLgt - Cria uma lista Ordenada (Coloca Números no
  lugar de bolinhas)
• Exemplo
• ltOLgt
• ltLIgt Item da lista
• ltLIgt Item da lista
• ltLIgt Item da lista
• lt/OLgt

26

• Saída
• 1. Item da lista
• 2. Item da lista
• 3. Item da Lista

27
ltImg srcgt - Carrega uma Imagem na página.
Formatos de imagens permitidas são (gif ou jpg).

• Exemplo
• ltimg src bgvisa.jpg"gt
• Saída Será uma figura no formato (jpeg).

28
(No Transcript)
29

• Obs Sobre imagens para colocar uma imagem ou
  cor no fundo da página devemos usar o comando
  ltBodygt da seguinte maneira.

30

• Exemplo Cor
• ltBODY bgcolor "00ff00"gt
• Exemplo Imagem
• ltBODY background "univap1.jpg"gt

31

• ltFramesgt Vem a ser um recurso da linguagem
  HTML que permite dividir as páginas em regiões
  diferentes na mesma tela.
• Sintaxe
• ltFrameset cols p1,p2,p3 rows p1,p2,p3
  frameborder 1/0gt
• ltframe name"Nome" src"pagina.html"gt
• lt/Framesetgt

32

• cols divide a janela do browser em colunas.
• Rows divide a janela do browser em linhas.
• p1,p2,p3 vem a ser o numero de divisões.
• Frameborder 1 - Quando a parece a divisão e 0 -
  Quando não aparece nada.
• Frame name determina o nome do frame e o
  arquivo (HTML) que será colocado na area
  designada.

33

• Exemplo Arquivo gt MenuFrame.html
• ltHTMLgtltHEADgt ltTITLEgtFramelt/TITLEgtlt/HEADgt
  ltFrameset cols200, frameborder1gt ltframe
  name"Menu" src"indcap.html"gt ltframe
  name"textos" src"a.html"gt ltframe
  name"textos" src"b.html"gt lt/framesetgt
  lt/HTMLgt
• Importante Em arquivo (HTML) com frame
• não deverá Ter a instrução
• ltbodygt

34

• ltBase targetgt - consegue
• reconhecer qual região da tela
• ele irá carregar uma determinada
• página.

35

• Exemplo IndCap.html
• ltHTMLgtltHEADgt ltTITLEgtPrincipallt/TITLEgt
  ltbase target"textos"gtlt/HEADgtltBODYgt
  ltcentergt lth3gtMenu Princ.lt/h3gt ltulgt ltligtlta
  href"a.html" target"textos"gtIntroduçãolt/agt ltligt
  lta href"b.html" target"textos"gtCapitulo-1lt/agt lt
  ligtlta href"c.html" target"textos"gtCapitulo-2lt/agt
  lt/ulgt lt/centergt lt/BODYgtlt/HTMLgt

36
(No Transcript)
37

• Criando Ancoras Recurso no qual um determinado
• link irá selecionar que parte de página será
• mostrada.
• Obs Para se usar o marcador de ancora deve-se
  colocar . No link.
• lta Href"parte1"gtIntroduçãolt/agt
• No texto devemos usar a marcação
• ltA Name"parte1"gtTexto Parte 1lt/Agt

38

• Criando uma Tabela HTML
• ltTablegt - Marcador que permite criar uma tabela.
• Obs O marcador lttablegt possui dois
  sub-marcadores o lttrgt e lttdgt.
• Onde TR - referencia uma linha.
• TD - Referencia uma coluna.

39

• Exemplo
• ltTable border 0gt lttrgt lttdgt Linha - 1
  lt/tdgt lttdgt Linha - 1 lt/tdgt lttdgt Linha - 1
  lt/tdgt lt/trgt lttrgt lttdgt Linha - 2
  lt/tdgt lttdgt Linha - 2 lt/tdgt lttdgt Linha - 2
  lt/tdgt lt/trgt lt/tablegt