Ppt web.pptx 11 e 12
-
Upload
washington-oliveira -
Category
Documents
-
view
801 -
download
1
Transcript of Ppt web.pptx 11 e 12
![Page 1: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/1.jpg)
Aula: Data:
Turma:
Ambiente Web
Washington Silva
Professor:
06 13/04/2023
Ambiente Web
![Page 2: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/2.jpg)
![Page 3: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/3.jpg)
Instrutor: Washington Silva
Ambiente Web
O que é HTML O que são TAGS Visualizando o documento em HTML Principais TAGS Formatação
Sumário
![Page 4: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/4.jpg)
Instrutor: Washington Silva
Ambiente Web
O QUE É HTML? HTML – é uma linguagem de marcação de
hipertexto. H - Hyper T – Text M - Markup L – Language
![Page 5: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/5.jpg)
Instrutor: Washington Silva
Ambiente Web
HTML pode ser feito em qualquer editor de texto, até mesmo o simples Bloco de Notas:
Clique em: Botão Iniciar > Executar > NotePad
![Page 6: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/6.jpg)
Instrutor: Washington Silva
Ambiente Web
TAGS Tag é uma palavra-chave (comando) que
define um item (imagens, texto, hyperLink, etc.) que irá fazer parte da página
Lembrando que a grande maioria trabalha em pares.
As tags são identificadas por estarem entre os sinais < > e < />
![Page 7: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/7.jpg)
Instrutor: Washington Silva
Ambiente Web
TAGS
• <Comando> Seu Texto </Comando>
![Page 8: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/8.jpg)
Instrutor: Washington Silva
Ambiente Web
TAGS - PRINCIPAIS<HTML> </HTML>
Marca o início e o fim do documento
<HEAD> </HEAD>Marca o início e o fim do Cabeçalho
<TITLE> </TITLE>Mostra o título na barra de título
<BODY> </BODY>Determina o que vai ser o “corpo” do programa.
![Page 9: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/9.jpg)
Instrutor: Washington Silva
Ambiente Web
TAGS – NA PRÁTICA• <HTML> • <HEAD> • <TITLE> Minha primeira Aula de HTML• </TITLE>• </HEAD>• <BODY> • Bom dia a todos, quem esta com sono
levanta a mão ..• </BODY>• </HTML>
![Page 10: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/10.jpg)
Instrutor: Washington Silva
Ambiente Web
TAGS – NA PRÁTICA
![Page 11: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/11.jpg)
Instrutor: Washington Silva
Ambiente Web
TAGS – NA PRÁTICA
![Page 12: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/12.jpg)
Instrutor: Washington Silva
Ambiente Web
TAGS – NA PRÁTICA
<HTML> <HEAD> <TITLE> Minha primeira Página </TITLE> </HEAD>
![Page 13: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/13.jpg)
Instrutor: Washington Silva
Ambiente Web
TAGS – NA PRÁTICA <BODY> Sejam bem vindo ao mundo HTML! </BODY> </HTML>
![Page 14: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/14.jpg)
Instrutor: Washington Silva
Ambiente Web
TAGS - PRINCIPAIS
<BODY> <H1> Cabeçalho de tamanho 1 </H1> <H2> Cabeçalho de tamanho 2 </H2> <H3> Cabeçalho de tamanho 3 </H3> <H6> Cabeçalho de tamanho 6</H6></BODY>
![Page 15: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/15.jpg)
Instrutor: Washington Silva
Ambiente Web
• <H1>• Cabeçalho de tamanho 1• <H2>• Cabeçalho de tamanho 2• <H3>• Cabeçalho de tamanho 3• <H6>• Cabeçalho de tamanho 6
![Page 16: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/16.jpg)
Instrutor: Washington Silva
Ambiente Web
TAG – PARÁGRAFO <P>
• <HTML> • <HEAD> • <TITLE> Minha primeira Página HEHEHE </TITLE>• </HEAD>• <BODY> • Sejam bem vindo ao mundo HTML, <P>agora viajaremos • <P>no html<P>!!!!!• </BODY>• </HTML>
![Page 17: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/17.jpg)
Instrutor: Washington Silva
Ambiente Web
TAG – PARÁGRAFO <P>
![Page 18: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/18.jpg)
Instrutor: Washington Silva
Ambiente Web
![Page 19: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/19.jpg)
Instrutor: Washington Silva
Ambiente WebTAG - QUEBRA DE LINHA <BR>
O comando <br> faz uma quebra de linha. Este comando também insere uma linha em branco no seu local ou na linha seguinte á qual ele foi inserido
![Page 20: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/20.jpg)
Instrutor: Washington Silva
Ambiente Web
TAG - QUEBRA DE LINHA <BR> <HTML> <HEAD> <TITLE> Minha primeira página HTML
</TITLE> </HEAD> <BODY> Quando um comando <BR> é inserido em
um local do programa, o browser irá<BR> fazer uma quebra de linha, <BR> posiciona-se na linha seguinte ao comando.<BR>
</BODY> </HTML>
![Page 21: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/21.jpg)
Instrutor: Washington Silva
Ambiente Web
TAG - QUEBRA DE LINHA <BR>
![Page 22: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/22.jpg)
Instrutor: Washington Silva
Ambiente Web
Formatação Sintaxe Função
NEGRITO <b>texto</b> Aplica o estilo negrito
ITÁLICO <I>texto</I> Aplica o estilo itálico
SUBLINHADO
<u>texto</u> Aplica um sublinhado
SMALL <small>texto</small>
Reduz e altera a fonte
BIG <big>texto</big> Aumenta a fonte e aplica negrito
Cor da fonte <font color=?></font>
Altera a cor da fonte
![Page 23: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/23.jpg)
Instrutor: Washington Silva
Ambiente Web
FORMATAÇÃO
TEXTO
<b></b> Texto negrito.
<i></i> Texto em itálico.
<tt></tt> Texto estilo máquina de escrever, mono espaçamento.
<font size=?></font> Tamanho das letras.
<font color=?></font> Cor das letras.
![Page 24: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/24.jpg)
Mais algumas tags
FORMATAÇÃO
ATRIBUTOS DO CORPO
<body bgcolor=?> Cor de fundo.
<body text=?> Cor de texto.
![Page 25: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/25.jpg)
FORMATAÇÃO
TEXTO
<b></b> Texto negrito.
<i></i> Texto em itálico.
<tt></tt> Texto estilo máquina de escrever, mono espaçamento.
<font size=?></font> Tamanho das letras.
<font color=?></font> Cor das letras.
![Page 26: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/26.jpg)
GRAFISMO
<img src=“imagem.jpg"> Insere uma imagem.
<img src=“imagem.jpg“ align=?>
Alinha uma imagem em relação ao resto do texto.
<img src=“imagem.jpg“ border=?> Define a borda da imagem.
<img src=“ imagen" width=“ %">
Define o tamanho da exibição da Imagem.
Formatação
![Page 27: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/27.jpg)
Vamos montar uma nova pagina Inserir texto fomatar cor, fonte, tamanho da
fonte Inserir 15 imagens Inserir 10 gif animadosNão quero que reste nenhuma duvida sobre
inserir imagem na pagina de vcs .....
EXERCÍCIO
![Page 28: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/28.jpg)
ATIVIDADES
Faça os exemplos
![Page 29: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/29.jpg)
![Page 30: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/30.jpg)
![Page 31: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/31.jpg)
ATIVIDADE
![Page 32: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/32.jpg)
Faça conforme o texto abaixo siga as orientações cor sublinhado itálico
![Page 33: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/33.jpg)
ATIVIDADE 2
Realizar uma pesquisa sobre css Sua pesquisa deve contes os seguintes
tópicos O que é css Quando surgiu css Importância em utilizar css Quais as diferenças entre HTML e o CSS
![Page 34: Ppt web.pptx 11 e 12](https://reader036.fdocument.pub/reader036/viewer/2022062308/558fc33d1a28abcd668b47c2/html5/thumbnails/34.jpg)
VAMOS AO LABORATÓRIO