DesDig Aula 04

•

IBMR

Raphaela Lima

04.04.2022

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 58 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 58 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 58 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 Gráfico

8.744 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 aula 
04
Html 1
O bendito do html.
HTML
O acrônimo HTML significa em inglês: 
HyperText Markup Language. 
Os hipertextos são conjuntos de 
elementos conectados. 
Podem ser palavras, imagens, vídeos, 
documento, etc. 
Quando conectados, formam uma rede 
de informações que permite a 
comunicação de dados, organizando 
conhecimentos e guardando 
informações.
HTML
Para gente aqui fica: 
Linguagem de Marcação de Hipertexto. 
PARA QUE SERVE?
É a linguagem base da internet. 
Ele permite inserir o conteúdo e estabelecer a 
estrutura básica de um website. 
HTML
Foi criado em 91 por Tim Berners-Lee 
(lembra do carinha que trabalhou no 
Grande Colisor de Hárdrons? E que em 89 
criou o www? Entonces.) 
HTML2
Em 95, foi a vez do HTML 2, que ficou nas 
mÃos do HTML working group. 
HTML2
Várias empresas de navegadores ajudaram 
na programação da nova linguagem, mas 
isso foi ruim, pois cada uma queria utilizar 
as suas tags.
HTML3
No final desse ano (95) , então, o html3 
nasceu, só que dessa vez o controle era 
de um consórcio, o W3C - ou World 
Wide Web Consortium.
HTML3
Esse consórcio foi gerenciado pelo 
Tim Berners-Lee, e padronizou o 
sistema e as futuras inovações.
HTML4
Em 97, a quarta versão foi produzida 
e durou por muitos ano (inclusive 
ainda é utilizado por muitos de nós).
XHTML
Em 2001, a W3C queria acabar com 
o html e criar uma nova baseada na 
tecnologia XML- a xhtml.
HTML5
Quando a W3C anunciou o xhtml no 
lugar da versão html, algumas das 
principais empresas (mozilla, opera e 
apple) ficaram boladas e criaram o 
WHATWG, que tinha como função 
evoluir a linguagem html, 
independente do W3C.
HTML5
Em 2008 a primeira versão 
do html5 foi lançada.
Ele dividiu o HTML em semântica, estilo e interatividade.
SEMÂNTICA
Então, o que era produzido 
com significado, era 
produzido na própria html5;
ESTILO
O que era estilo-formatação, 
era produzido no CSS, outra 
tecnologia;
INTERAÇÃO
E tudo que é interativo entre 
páginas foi para o Javascript.
Editores de texto
É com editor que começamos a 
editar/produzir um site.
Existem diversos programinhas para se 
trabalhar, mas nada de impede de fazer um 
site em um bloco de notas.
E é nele que vamos mexer hoje!
Primeiras considerações
1-Todos os arquivos na net devem 
ficar sem espaço e ou sem acento.
Ex: menu_servicos.html
Pusque?
Alguns navegadores não vão ler esse 
espaço e vão adicionar caracteres 
próprios, alterando o endereço e 
ficando inviável para aquele usuário.
Marca (tag)
As tags são usadas para informar ao 
navegador a estrutura do site.
Ou seja: quando se escreve um código em 
HTML, as tags serão interpretadas pelo 
navegador, produzindo assim a estrutura 
e o conteúdo visual da página.
Marca (tag)
A principal característica das tags é 
estarem sempre dentro dos sinais 
de chevron 
(sinal de “maior que” e “menor que”) 
ou seja: < >.
Má comacim?
Tag HTML
A Tag html, por exemplo, abre com a tag 
<html> e fecha com a tag </html>
Então se eu quisesse escrever simplesmente 
“olá mundo”, o clichê das internets, era só eu 
colocar <html> olá mundo </html>
Abra seu bloco de notas e tente ai!
Tag HTML
Mas isso é um html normal.
Se eu quiser informar que é um html5, 
precisamos escrever antes da tag <html>:
<!DOCTYPE html>
<html>ola mundo</html>
Ao fazê-lo você está informando que ele 
é um html5.
HTML LANG
O atributo HTML lang pode ser usado 
para declarar o idioma de uma página da 
Web ou parte de uma página da Web. 
Isso serve para ajudar os mecanismos de 
busca e navegadores.
HTML LANG
Sabe quando você coloca “somente 
páginas em português?”... entonces.
HTML LANG
De acordo com a recomendação do W3C:
Deve declarar o idioma principal de cada 
página da Web com o atributo lang 
dentro da tag primeira tag <html>
<html lang="br">olá mundo</html>
HEAD <head></head>
Se você lembrar bem das redações da 
vida, cabeçalho é um trecho de um 
documento que fica no início e 
fornece informações. 
Por exemplo, no cabeçalho de uma 
prova da escola você preenchia seu 
nome, número, nome do professor, 
nome da disciplina etc.
<!DOCTYPE html> 
<html lang="br"> 
<head> 
<title>Título da página </title> 
</head> 
<body> conteúdo do site
</body> 
</html>
HEAD <head></head>
Na criação de sites, a tag head tem 
uma função similar: Serve para 
armazenar informações de uma 
página de seu site. 
Essas informações são invisíveis, ou 
seja, os usuários que estiverem 
navegando pelo seu website não 
verão o que existe na tag head.
<!DOCTYPE html> 
<html lang="br"> 
<head> 
<title>Título da página </title> 
</head> 
<body> conteúdo do site
</body> 
</html>
Má caçarolas, se ninguém vai ver, pra que serve essa 
budega?
HEAD <head></head>
Essa tag possui informações que serão 
importantes para seu navegador e para 
serviços de busca, como o Google.
<!DOCTYPE html> 
<html lang="br"> 
<head> 
<title>Título da página </title> 
</head> 
<body> conteúdo do site
</body> 
</html>
HEAD <head></head>
Um exemplo de utilidade da tag head para 
o seu navegador, é para criar um título de 
uma página, através da tag <title>. 
O título é exibido na barra superior do seu 
browser (do lado dos botões de minimar, 
maximizar e fechar).
<!DOCTYPE html> 
<html lang="br"> 
<head> 
<title>Título da página </title> 
</head> 
<body> conteúdo do site
</body> 
</html>
HEAD <head></head>
Já um exemplo de uso da tag head para os 
navegadores, é o uso das meta-tags, como 
a meta-tag description, onde fornecemos 
uma descrição da página (é aquele texto 
explicativo que aparece nos resultados de 
busca do Google.
(a gente vai ver mais tarde, vamo com 
calma pra não azedar a cabecinha)
<!DOCTYPE html> 
<html lang="br"> 
<head> 
<title>Título da página </title> 
</head> 
<body> conteúdo do site
</body> 
</html>
TITLE <title></title>
Essa tag define o título da sua página, 
o nome que aparecerá na sua aba, 
janela ou guia. 
Por esta razão, a tag <title> é de 
grande importância para o SEO;
SEO: Search Engine Optimization, 
que, em português, significa 
Otimização para Mecanismos de 
Buscas.
<!DOCTYPE html> 
<html lang="br"> 
<head> 
<title>Título da página </title> 
</head> 
<body> conteúdo do site
</body> 
</html>
BODY <body></body>
A tag que representa o corpo do 
documento. 
Em síntese, é nessa tag que todos os 
elementos visíveis do seu site devem 
ser inseridos.
Agora que já conhecemos as tags 
HTML que formam a estrutura básica 
de uma página, podemos então 
estudar as diversas tags que 
contemplarão o documento.
<!DOCTYPE html> 
<html lang="br"> 
<head> 
<title>Título da página </title> 
</head> 
<body> conteúdo do site
</body> 
</html>
Estrutura básica de um site
<!DOCTYPE html> 
<html lang="br"> 
<head> 
<title>Título da página </title> 
</head> 
<body> conteúdo do site
</body> 
</html>
<meta/>
Permite inserir metadados ao seu 
documento,como o , a informação 
<meta charset="utf-8"/>, que garante 
a compatibilidade do código com os 
caracteres de padrão latino 
americano;
Teste ai!
<!DOCTYPE html>
<html lang="br">
<head>
<meta charset="utf-8"/>
<title> Sei lá </title>
</head>
<body><h5> Olá IBMR</h5>
<h6> Olá turma de Desaini 
Dijitáu</h6>
</body>
</html>
<meta/>
Ou seja
Se eu escrever “olá mundo” entre os 
html, dependendo do navegador, vai 
aparecer um texto zoadão, pois não lê 
caracteres latinos, como acentos.
Teste ai!
<!DOCTYPE html>
<html lang="br">
<head>
<meta charset=”utf-8”/>
<title> Sei lá </title>
</head>
<body><h5> Olá IBMR</h5>
<h6> Olá turma de Desaini 
Dijitáu</h6>
</body>
</html>
Tags de Comentários
Serve para criar comentários na sua 
documentação. 
Ele não aparecerá no seu site.
Isso serve para dar instruções ou 
lembretes sobre seu código.
<html lang="br">
Olá mundo
<!-- isso é um comentário 
e não vai aparecer...-->
</html>
Tags de Comentários
Portanto, o comentário também não é 
renderizado e nem compilado. 
Dessa forma, oscomentários HTML ficam 
visíveis apenas para desenvolvedores 
através do código fonte.
<html lang="br">
Olá mundo
<!-- isso é um comentário 
e não vai aparecer...-->
</html>
Tags de Comentários
Em um documento HTML é muito 
comum encontrar comentários HTML 
em partes do código que precisam de 
atenção. 
Também é comum encontrar 
comentários que funcionam para auxiliar 
e indicar a marcação do mesmo. 
<html lang="br">
Olá mundo
<!-- isso é um comentário 
e não vai aparecer...-->
</html>
Tags de Comentários
Tente
<html lang="br">
Olá mundo
<!-- isso é um comentário e 
não vai aparecer...-->
</html>
<html lang="br">
Olá mundo
<!-- isso é um comentário 
e não vai aparecer...-->
teste
</html>
Tags de Comentários
E também:
<html lang="br">
Olá mundo
<!-- O comentário pode ter o tamanho 
que você desejar.
Todas essas linhas são parte do 
comentário...
-->
</html>
<html lang="br">
Olá mundo
<!-- O comentário pode ter o 
tamanho que você desejar.
Todas essas linhas são parte do 
comentário...
-->
</html>
As Heading Tags (H1, H2, H3, ...) 
São recursos de programação HTML 
utilizados para destacar títulos e 
sub-títulos de uma página. 
H1 é a abreviação do inglês para Header 1, 
ou Cabeçalho 1, logo, o mais importante 
dos Headers. 
<!DOCTYPE html> 
<html lang="br"> 
<head> 
<title>Título da página </title> 
</head> 
<body> 
<h1>título H1</h1>
</body> 
</html>
As Heading Tags (H1, H2, H3, ...) 
Conceitualmente, o H1 possui um 
destaque maior, uma fonte maior, e é 
geralmente o elemento de texto mais 
visível da página. 
É um importante elemento que o Google 
utiliza para determinar o principal assunto 
abordado em uma página, visto que o 
título de uma página conceitualmente 
define seu conteúdo.
Teste ai!
<html lang="br">
<h1>Olá mundo,</h1>
<h2> Olá Brasil,</h2>
<h3> Olá Rio,</h3>
<h4> Olá Barra</h4>
<h5> Olá IBMR</h5>
<h6> Olá turma de Desaini Dijitáu</h6>
</html>
Formatação de Caracteres: <b> </b> 
Texto em Negrito!
Teste ai!
<html lang="br">
<b>texto em negrito!</b>
</html>
Formatação de Caracteres: <i> </i> 
Texto em Itálico!
Teste ai!
<html lang="br">
<b>texto em negrito!</b>
<i>texto em mamma mia!</i>
</html>
Formatação de Caracteres: <u> </u> 
Texto em sublinhado!
Teste ai!
<html lang="br">
<b>texto em negrito!</b>
<i>texto em mamma mia!</i>
<u>texto em sublinhado!</u>
</html>
Formatação de Caracteres: <sub> </sub> 
Texto em subscrito!
Teste ai!
<html lang="br">
<b>texto em negrito!</b>
<i>texto em mamma mia!</i>
<u>texto em sublinhado!</u>
<sub>texto em subscrito!</sub>
</html>
Formatação de Caracteres: <br>
Se eu escrever direto no html, ele não vai 
pular de linha: ele vai continuar eterno, 
como por exemplo:
Teste ai!
<!DOCTYPE html>
<html lang="br">
Mussum Ipsum, cacilds vidis litro abertis. 
A ordem dos tratores não altera o pão 
duris. Vehicula non. Ut sed ex eros. 
Vivamus sit amet nibh non tellus 
tristique interdum. 
Quem num gosta di mim que vai caçá 
sua turmis! Detraxit consequat et quo 
num tendi nada.
</body>
</html>
Formatação de Caracteres: <p> 
</p>
Serve para criar parágrafos!
Teste ai!
<!DOCTYPE html>
<html lang="br">
<p>Mussum Ipsum, cacilds vidis litro abertis. 
A ordem dos tratores não altera o pão duris. 
Vehicula non. Ut sed ex eros. Vivamus sit 
amet nibh non tellus tristique interdum. </p>
<p>Vivamus sit amet nibh non tellus tristique 
interdum. Quem num gosta di mim que vai 
caçá sua turmis!.</p>
</body>
</html>
Formatação de Caracteres: <p> 
</p>
E agora misturando os 2 pra deixar 
mais alinhado
Teste ai!
<!DOCTYPE html>
<html lang="br">
<p>Mussum Ipsum, cacilds vidis litro abertis. 
<br>A ordem dos tratores não altera o pão 
duris. <br>Vehicula non. Ut sed ex eros. 
<br>Vivamus sit amet nibh non tellus tristique 
interdum. </p>
<p>Vivamus sit amet nibh non tellus tristique 
interdum. <br>Quem num gosta di mim que 
vai caçá sua turmis!.</p>
</body>
</html>
Formatação de Caracteres: <wbr> 
Ele quebra a palavra, hifeniza
<!DOCTYPE html><html lang="br">
<p>Mussum Ipsum, cacilds vidis 
litro abertis. A ordem dos tratores 
não altera o pão duris 
sjhgbdhfgsjhdgfjhsdgjhfgjhsg. 
Vehicula non. Ut sed ex eros. 
Vivamus sit amet nibh non tellus 
tristique interdum. </p>
</html>
Teste ai!
<!DOCTYPE html>
<html lang="br">
<p>Mussum Ipsum, cacilds vidis litro abertis. 
A ordem dos tratores não altera o pão duris 
<wbr> 
sjhgbdhfgsjhdgsajsdhhdfhdfjhdjhfdjkhsdfjkhkjd
fhdfhfdkjhdfkjhfdkjhfjhsdgjhfgjhsg<wbr> . 
Vehicula non. Ut sed ex eros. Vivamus sit 
amet nibh non tellus tristique interdum. </p>
</html>
Trabs
➔ Faça um site de notícias 
com:
1) Nome do jornal
2) Uma chamada principal
3) 3 notícias de tamanho 
médio e subtítulo.
4) 4 notícias com apenas título 
e subtítulo.
Programas para editar texto
É com editor que começamos a editar/produzir um site.
Existem diversos programinhas para se trabalhar, mas 
nada de impede de fazer um site em um bloco de notas.
E é nele que vamos mexer hoje!
Mentira! Ou mais ou menos, vamos pra esse aqui.
https://html5-editor.net/