desenvolvimento sites html
TRANSCRIPT
![Page 1: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/1.jpg)
Desenvolvimento de SiteAula 07
Washington Silva
![Page 2: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/2.jpg)
![Page 3: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/3.jpg)
• O que é HTML• O que são TAGS• Visualizando o documento em HTML• Principais TAGS• Formatação
Sumário
![Page 4: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/4.jpg)
O que é HTML?• HTML – é uma linguagem de marcação de
hipertexto.• H - Hyper• T – Text• M - Markup• L – Language
![Page 5: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/5.jpg)
• 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: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/6.jpg)
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: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/7.jpg)
Tags
•<Comando> Seu Texto
</Comando>
![Page 8: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/8.jpg)
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: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/9.jpg)
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: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/10.jpg)
Tags – Na prática
![Page 11: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/11.jpg)
Tags – Na prática
![Page 12: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/12.jpg)
Tags – Na prática• <HTML> • <HEAD> • <TITLE> Minha primeira Página </TITLE>• </HEAD>
![Page 13: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/13.jpg)
Tags – Na prática• <BODY> • Sejam bem vindo ao mundo HTML!• </BODY>• </HTML>
![Page 14: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/14.jpg)
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: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/15.jpg)
• <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: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/16.jpg)
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: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/17.jpg)
TAG – Parágrafo <P>
![Page 18: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/18.jpg)
![Page 19: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/19.jpg)
TAG - 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: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/20.jpg)
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: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/21.jpg)
TAG - QUEBRA DE LINHA <BR>
![Page 22: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/22.jpg)
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: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/23.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 24: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/24.jpg)
![Page 25: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/25.jpg)
Atividades• Faça os exemplos
![Page 26: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/26.jpg)
![Page 27: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/27.jpg)
![Page 28: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/28.jpg)
Atividade
![Page 29: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/29.jpg)
• Faça conforme o texto abaixo siga as orientações cor sublinhado itálico
![Page 30: Desenvolvimento sites html](https://reader035.vdocuments.net/reader035/viewer/2022062709/558fd10d1a28ab2f1b8b4719/html5/thumbnails/30.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