aula05_design_digital

•

Humanas / Sociais

Sergio Xavier

26/11/2020

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 30 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 30 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 9, do total de 30 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Design Digital

513 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

DESIGN DIGITAL - Prof. Sergio Xavier
Design Digital
Aula 05
Prof. Me. Sergio Xavier
DESIGN DIGITAL - Prof. Sergio Xavier
Sumário
Introdução ao HTML5, criação e construção de 
arquivo HTML
▪ - Formatação de estruturas básicas de 
formatação de textos parágrafos, quebras de 
linha, links e inclusão de imagens.
2
DESIGN DIGITAL - Prof. Sergio Xavier
HTML
3
É linguagem de programação?
Para que serve?
Como é na prática?
HTML 
NÃO É LINGUAGEM DE 
PROGRAMAÇÃO
4
HTML 
É LINGUAGEM DE 
MARCAÇÃO DE TEXTO
(PARA CONSTRUÇÃO DE SITES)
DESIGN DIGITAL - Prof. Sergio Xavier
H
T
M
L
5
YPER
EXT
ARKUP
ANGUAGE
Significado
DESIGN DIGITAL - Prof. Sergio Xavier
HTML
6
Serve para o navegador interpretar e informar a estrutura de 
página web, exibindo o conteúdo quando você acessa a 
página pela internet.
Serve para a construção de sites, aplicativos, lojas de e-
commerce, blogs, email marketing, personalização das redes 
sociais, etc.
7E-commerce
Redes sociais
E-mail marketing
Aplicativos
Sites
DESIGN DIGITAL - Prof. Sergio Xavier
HTML
8
na prática
DESIGN DIGITAL - Prof. Sergio Xavier
HTML na prática
9
▪ Tudo em HTML será representado pelas TAGs <>
▪ Sua sintaxe pode ser de 2 formas:
<tag></tag> 
<tag/>
▪ Há também o uso de propriedades nas TAGs para alterar 
seu comportamento
<tag height=“20px”>
DESIGN DIGITAL - Prof. Sergio Xavier
Estrutura básica
10
<html>
<head>
<title>Minha primeira página em html</title>
</head>
<body>
...
...
</body>
</html>
TODOS OS COMANDOS DE INCREMENTO 
DA PÁGINA, OU SEJA, TEXTOS, IMAGENS, 
LINKS, ETC DEVERÁ SER COLADOS 
DENTRO DO COMANDO <BODY>
DESIGN DIGITAL - Prof. Sergio Xavier
Estrutura básica
11
<html> - abertura do comando em html
<head> - cabeça do site – define a seção do html
<title> - título que será exibido no navegador
<body> - corpo de texto
Todas as vezes que se abre um comando, deve-se fechar o 
comando, com o uso “/” (barra invertida):
<html>.........</html>
DESIGN DIGITAL - Prof. Sergio Xavier 12
Vamos digitar o comando 
para aprender na 
prática?
▪ Baixe, gratuitamente, o aplicativo 
EASY HTML (editor de html) no seu 
celular.
DESIGN DIGITAL - Prof. Sergio Xavier 13
<html>
<head>
<title>Minha primeira página em html</title>
</head>
<body>
Olá mundo! Meu nome é Sergio Xavier
</body>
</html>
Estrutura básica
14
DESIGN DIGITAL - Prof. Sergio Xavier 15
Há diferentes tags para representar diferentes 
tamanhos:
<h1>
<h2>
...
<h5>
Exemplo:
<h1>Olá mundo! Sou o Sergio Xavier</h1>
Cabeçalhos
DESIGN DIGITAL - Prof. Sergio Xavier 16
Utilização de parágrafo
<p>Texto dentro do parágrafo</p>
Quebra de linha
<br/>
Parágrafo e quebra de linha
DESIGN DIGITAL - Prof. Sergio Xavier 17
<b>texto em negrito</b>
<i>itálico</i>
<sup>acima</sup>
<sub>abaixo</sub>
Estilos em textos
DESIGN DIGITAL - Prof. Sergio Xavier 18
Exercício:
Reproduzir esta formatação em html, conforme indicado 
abaixo:
DESIGN DIGITAL - Prof. Sergio Xavier 19
Comando que irá levar para outras páginas 
dentro ou fora do site:
<a href=“http://www.google.com”>Google</a>
Links
DESIGN DIGITAL - Prof. Sergio Xavier 20
Podemos incluir incremento no comando LINK 
como será aberta esta página:
TARGET
Valores: _blank, _self, _parent, _top
Links
<a href=“www.google.com” target=“_parent”>google</a>
DESIGN DIGITAL - Prof. Sergio Xavier 21
Exibe uma imagem em HTML
TAG - <IMG>
Inserção de imagens
DESIGN DIGITAL - Prof. Sergio Xavier 22
SRC – especifica o caminho (pasta ou diretório) 
onde encontra-se uma imagem
WIDTH – especifica a largura da imagem
HEIGHT – especifica a altura da imagem
ALT – especifica o texto que irá aparecer 
quando o mouse passar pela imagem
Inserção de imagens
DESIGN DIGITAL - Prof. Sergio Xavier 23
<img src=“audi.jpg” height=“200px” width=“100px” alt=“versão....”>
Inserção de imagens
DESIGN DIGITAL - Prof. Sergio Xavier 24
Exercício:
- Incluir uma imagem em um página HTML com dimensões 200 
de largura e 100 de altura e incluir o nome da imagem 
quando passarmos o mouse.
- Associar um link a esta imagem.
DESIGN DIGITAL - Prof. Sergio Xavier 25
As fontes mais utilizadas são: ARIAL e 
VERDANA
A sintaxe para colocar o comando <FONT>
Fontes – Pelo tipo
<FONT FACE=“ARIAL”>Meu nome é Sergio</FONT>
DESIGN DIGITAL - Prof. Sergio Xavier 26
Para colocar cor na fonte, existem 3 sintaxes:
Fontes – Por cor
<FONT COLOR=“#XXXXXX”> Cor com 6 dígitos em hexadecimal 
</FONT>
<FONT COLOR=“RGB(X,X,X)”> Cor definida pelos 3 números do RGB 
</FONT>
<FONT COLOR=“NOME DA COR”> Cor definida pelo nome </FONT>
DESIGN DIGITAL - Prof. Sergio Xavier 27
Para colocar cor na fonte, existem 3 sintaxes:
Fontes – Por tamanho de letra
<FONT SIZE=“1”> Tamanho da fonte 1</FONT>
<FONT SIZE=“2”> Tamanho da fonte 1</FONT>
<FONT SIZE=“3”> Tamanho da fonte 1</FONT>
DESIGN DIGITAL - Prof. Sergio Xavier 28
Vamos a sintaxe completa:
Fontes – Sintaxe completa
<FONT SIZE=“2” COLOR=“RED” FACE=“ARIAL”>Meu nome é 
Sergio</FONT> 
Resultado:
DESIGN DIGITAL - Prof. Sergio Xavier 29
Exercício:
- Vamos fazer conforme 
imagem da tela ao lado:
DESIGN DIGITAL - Prof. Sergio Xavier
Prof. Me. Sergio Xavier 
▪ Email: sergiosx@gmail.com
▪ www.facebook.com/profsergioxavier
▪ Blog: www.profsergioxavier.wordpress.com
30
mailto:sergiosx@gmail.com