universidade do vale do paraíba colégio técnico antônio teixeira fernandes disciplina...
TRANSCRIPT
![Page 1: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/1.jpg)
Universidade do Vale do ParaíbaColégio Técnico Antônio Teixeira Fernandes
Disciplina Programação p/ Web.
Material I-Bimestre
- Marcadores HTMLSite: http://www1.univap.br/~wagner
Prof. Responsável
Wagner Santos C. de Jesus
Roberto Cordeiro Walts
![Page 2: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/2.jpg)
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.
![Page 3: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/3.jpg)
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)
![Page 4: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/4.jpg)
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.
![Page 5: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/5.jpg)
![Page 6: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/6.jpg)
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.
![Page 7: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/7.jpg)
Principais elementos de uma Página são
Imagem Link Título Texto
![Page 8: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/8.jpg)
Comandos HTML e sua Estrutura Básica.
<> - 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.
![Page 9: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/9.jpg)
Estrutura de uma Página (HTML). Exemplo
<Html>
<Head>
<Title> Titulo da Pagina
</Title>
</Head>
<Body>
:
: <Corpo da Página>
:
</Body>
</Html>
![Page 10: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/10.jpg)
Obs : Todo Arquivo para ser executado em
um Browser deverá Ter a extensão (HTM
ou HTML)
![Page 11: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/11.jpg)
Marcadores Básicos : (HTML)
<Hr> - cria um traço na página.
Exemplo : <hr>
Saída: _____________________________
![Page 12: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/12.jpg)
<B> - Aplica o estilo Negrito
Exemplo : <B>Banana</B>
Saída : Banana
![Page 13: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/13.jpg)
<I> - Aplica o estilo Itálico.
Exemplo : <I> Laranja </I>
Saída : Laranja
![Page 14: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/14.jpg)
<U> - Aplica um sublinhado (Não funciona em todos os Browsers)
Exemplo : <U> Texto Bonito </U>
Saída : Texto Bonito
![Page 15: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/15.jpg)
<Pre> - Esse comando permite cria uma tabulação manual no texto fazendo com seutexto sai exatamente no local desejado.
Exemplo : <Pre> Hoje Não Houve Aula </Pre>
Saída : Hoje Não Houve Aula
Obs : Serão considerados os espaços a
esquerda e a direita.
![Page 16: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/16.jpg)
<H?> - 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 : <H1> Letras </H1>
Saída : Letras
![Page 17: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/17.jpg)
<Center> - Centraliza um texto marcado.
Exemplo : <Center> Lista de Exercício </Center>
Saída : Lista de Exercício
![Page 18: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/18.jpg)
<Font> - Determina o tipo tamanho e cores das letras.
Exemplo : <font size = "8" Face = "Arial" color = "red"> Letra Vermelha </Font>
Saída : Letra Vermelha
![Page 19: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/19.jpg)
![Page 20: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/20.jpg)
<BR> - Permite saltar uma linha em branco.
Exmplo : Oi Gente <BR> Tudo Bem
Saída :
Oi Gente
Tudo Bem
![Page 21: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/21.jpg)
Criando um Link - Vem a ser o processo de ligação de uma página com uma outra local ou não.
<A Href > - Esse comando permite criar um link com usuários através de uma página.
Exemplo : <A Href = "http://www.univap.br" > Site Univap </A>
Saída : Site Univap
![Page 22: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/22.jpg)
Marcadores de Lista trabalham em conjunto.
<UL> - Cria uma Lista não Ordenada.
<LI> - Cria um elemanto da lista.
<OL> - Cria uma lista ordenada.
![Page 23: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/23.jpg)
Exemplo :
<UL>
<LI> Capítulo - 1
<LI> Capítulo - 2
<LI> Capítulo - 3
</UL>
![Page 24: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/24.jpg)
Saída :
Capítulo - 1 Capítulo - 2 Capítulo - 3
![Page 25: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/25.jpg)
<OL> - Cria uma lista Ordenada (Coloca Números no lugar de bolinhas)
Exemplo :
<OL>
<LI> Item da lista
<LI> Item da lista
<LI> Item da lista
</OL>
![Page 26: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/26.jpg)
Saída:
1. Item da lista
2. Item da lista
3. Item da Lista
![Page 27: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/27.jpg)
<Img src> - Carrega uma Imagem na página. Formatos de imagens permitidas são (gif ou jpg).
Exemplo :
<img src = ”bgvisa.jpg">
Saída : Será uma figura no formato (jpeg).
![Page 28: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/28.jpg)
![Page 29: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/29.jpg)
Obs : Sobre imagens para colocar uma imagem ou cor no fundo da página devemos usar o comando <Body> da seguinte maneira.
![Page 30: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/30.jpg)
Exemplo Cor:
<BODY bgcolor = "#00ff00">
Exemplo Imagem :
<BODY background = "univap1.jpg">
![Page 31: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/31.jpg)
<Frames> : Vem a ser um recurso da linguagem HTML que permite dividir as páginas em regiões diferentes na mesma tela.
Sintaxe :
<Frameset cols = p1[,p2,p3] [rows = p1[,p2,p3] ] frameborder = 1/0>
<frame name="Nome" src="pagina.html">
:
:
</Frameset>
![Page 32: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/32.jpg)
-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.
![Page 33: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/33.jpg)
Exemplo : Arquivo => MenuFrame.html
<HTML><HEAD> <TITLE>Frame</TITLE></HEAD> <Frameset cols=200,* frameborder=1>
<frame name="Menu" src="indcap.html"> <frame name="textos" src="a.html">
<frame name="textos" src="b.html"> </frameset> </HTML>
Importante : Em arquivo (HTML) com frame
não deverá Ter a instrução
<body>
![Page 34: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/34.jpg)
<Base target> - consegue
reconhecer qual região da tela
ele irá carregar uma determinada
página.
![Page 35: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/35.jpg)
Exemplo : IndCap.html
<HTML><HEAD> <TITLE>Principal</TITLE> <base target="textos"></HEAD><BODY> <center>
<h3>Menu Princ.</h3><ul><li><a href="a.html" target="textos">Introdução</a><li><a href="b.html" target="textos">Capitulo-1</a><li><a href="c.html" target="textos">Capitulo-2</a>
</ul></center>
</BODY></HTML>
![Page 36: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/36.jpg)
![Page 37: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/37.jpg)
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.
<a Href="#parte1">Introdução</a>
No texto devemos usar a marcação
<A Name="parte1">Texto Parte 1</A>
![Page 38: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/38.jpg)
Criando uma Tabela HTML
<Table> - Marcador que permite criar uma tabela.
Obs : O marcador <table> possui dois sub-marcadores o <tr> e <td>.
Onde TR - referencia uma linha.
TD - Referencia uma coluna.
![Page 39: Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação p/ Web. Material I-Bimestre - Marcadores HTML Site: wagner](https://reader033.vdocuments.mx/reader033/viewer/2022060106/552fc10d497959413d8c46d4/html5/thumbnails/39.jpg)
Exemplo :
<Table border = 0> <tr>
<td> Linha - 1 </td> <td> Linha - 1 </td> <td> Linha - 1 </td> </tr> <tr> <td> Linha - 2 </td> <td> Linha - 2 </td> <td> Linha - 2 </td> </tr>
</table>