"Como é feito um website?" "Será que eu consigo?" Calma! Criar um site é mais tranquilo do que você imagina! E, para isso, o co:lab apresenta o curso Seu primeiro website, onde você conhecerá conceitos básicos e dará seus primeiros passos na construção de websites utilizando as linguagens HTML e CSS.

1. Seu Primeiro Website
com HTML e CSS – Dia 1

2. Olá!
• Nome
• O que faço no UOL
• Uma curiosidade sobre mim
• Expectativa sobre o curso

3. Quem somos
Carlos Henrique No UOL
UOL Música Deezer (antiga Rádio UOL)
co:lab (escutar, conectar, colaborar)
Pessoal
http://missaopessoal.com.br
http://carlohcs.com.br
Projetos
Zero, UOL Bootstrap, Eye Catcher,
Sobre UOL, Onboarding e outros
Frontend e PO no UOL;
apaixonado porweb,
música e café;

4. Quem somos
Patrícia No UOL
Designer de Serviços no co:lab (escutar,
conectar, colaborar)
Pessoal
Design, Programaria, Data Science,
quadrinhos, cachorros, pole dance
Atividades
Dinâmicas, pesquisas, interfaces
Designer de Serviços no
UOL

5. Quem somos
Yasminn Vaz No UOL
co:lab (escutar, conectar, colaborar)
Pessoal
fotografia | gato| PS4 | corrida de rua
github.com/yasminnvaz
Projetos
Zero, Sobre UOL
Frontend no UOL

6. Agenda
• Aquecimento
• Conceitos básicos – WEB e Internet
• HTML – estrutura do site
• Fato 1 - Elementos devem ser marcados com etiquetas
• Café
• Fato 2 - Estrutura básica
• Fato 3 - Caixinhas dentro de caixinhas
• CSS - Introdução

7. Aquecimento
Imitação

8. O que acontece quando eu digito
www.uol.com.br no navegador?

10. E como isso acontece?

14. www.uol.com.br

15. www.uol.com.br
pedido

16. www.uol.com.br
pedido
computador onde
estão os arquivos

17. www.uol.com.br
pedido
arquivos
computador onde
estão os arquivos

18. www.uol.com.br
pedido
arquivos
computador onde
estão os arquivos

19. www.uol.com.br
Domínio
É um nome que serve para identificare
localizaros websites na internet.
A partir dele, podemos saber em qual
computadorestão os arquivos do site.

20. www.uol.com.br
pedido
arquivos
computador onde
estão os arquivos

21. pedido
Requisição HTTP / HTTPS
Protocolo: Conjuntode regras.

22. HTTP / HTTPS

23. www.uol.com.br
pedido
arquivos
computador onde
estão os arquivos

24. computador onde
estão os arquivos
Servidor de arquivos

25. www.uol.com.br
pedido
arquivos
computador onde
estão os arquivos

26. www.uol.com.br
pedido
arquivos
computador onde
estão os arquivos
Website
Conjuntode páginas web: documentos
adequadosà exibiçãoem navegadores.

27. E assim funciona a WEB!

28. WEB
É composta por bilhões de
páginas que podem ser
acessadas através de
navegadores.

29. WEB
É um meio de acessar
informação utilizando a
infraestrutura da
INTERNET.

30. Internet
Rede mundial que interliga
milhões de dispositivos,
como computadores e
celulares...
(cabos, sinais sem fio)

31. Internet
...e possibilita que troquem
dados.

32. E como que a internet passa de um continente pro outro?

33. 99% das conexões do
planeta são feitas por cabos

37. www.uol.com.br
pedido
arquivos
computador onde
estão os arquivos

38. E como construímos um site?

39. E um aplicativo?

40. E um aplicativo?
E uma calculadora?

41. Temos que dizer ao computador o que
queremos construir.

42. Faça aí um site chamado
uol.com.br, onde eu possa
colocar artigos, fotos e
vídeos.

43. ???

44. ENTÃO COMO?

45. HORA DA MÃO NA MASSA

46. Editor de Código: VS Code

47. 1- Vamos fazer essa página

49. HTML
Linguagem de Marcação de Hipertexto

51. HTML
• HyperText Markup Language (HTML) - em inglês ou Linguagem de
Marcação de Hipertexto
• Linguagem que define qual é a estrutura de uma página web, quais
são os elementos que um site possui

52. Vamos marcar cada informação
com tags?

53. Como marcar as informações com tags
<tag>conteúdo</tag>
abre fecha

54. Fato 1 do HTML
Todos os elementos devem ser marcados
com tags

55. Vamos fazer esse
site?
https://construcao-de-sites.herokuapp.com/dia1

56. Mas antes

57. Quais são os
elementos do site?

58. Título
Título
Parágrafo
Título
Parágrafo
Título
Parágrafo
Parágrafo
Imagem

59. Título
Título
Parágrafo
Título
Parágrafo
Título
Parágrafo
Parágrafo
Imagem
?

60. Título
Título
Parágrafo
Título
Parágrafo
Título
Parágrafo
Parágrafo
Imagem
Link

63. - MDN
- W3.org
- W3Schools
- Stackoverflow
Eles também:

64. Agora... código!!!

65. Fato 2 do HTML
Todas as páginas html possuem a mesma
estrutura básica
<html>
<head> </head>
<body> </body>
</html>

66. <html>
<head>
(todas as informações para o navegador)
</head>
<body>
(todos elementos visíveis na página)
</body>
</html>

67. DOCTYPE
<!DOCTYPE html>
Versão do HTML que estamos usando.
Ref: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Heading_Elements

68. <!DOCTYPE html>
<html>
<head>
(todas as informações para o navegador)
</head>
<body>
(todos elementos visíveis na página)
</body>
</html>

69. Título
heading
<h1>Esse é o título 1</h1>
<h2>Esse é o título 2</h2>
<h3>Esse é o título 3</h3>
<h4>Esse é o título 4</h4>
<h5>Esse é o título 5</h5>
<h6>Esse é o título 6</h6>
Ref: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Heading_Elements

71. Parágrafo
(paragraph)
<p>Um parágrafo do texto</p>
<p>Outro parágrafo do texto</p>
Ref: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/p

72. Imagem
(image)
<img>
Ref: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/img

73. Imagem
(image)
<img src="imagem.jpg" alt="descrição da imagem">
Ref: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/img

74. Imagem
(image)
<img src="imagem.jpg" alt="descrição da imagem">
Ref: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/img
Atributo que define a
origem da imagem

75. Imagem
(image)
<img src="imagem.jpg" alt="descrição da imagem">
Ref: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/img
Atributo que define a
origem da imagem
Atributo para um texto
alternativo para a imagem

76. Atributos
Característicasde uma tag
<img src="imagem.jpg" alt="descrição da imagem">
Nome do atributo Nome do atributo

77. Atributos
Característicasde uma tag
<img src="imagem.jpg" alt="descrição da imagem">
Valor do atributo Valor do atributo

78. Por que meu texto está quebrado?

79. UTF-8
Unicode Transformation Format
<meta charset="UTF-8">
conjunto de
caracteres
Ref: http://www.iana.org/assignments/character-sets/character-sets.xhtml
padrão de definição de
caracteres

80. Link

81. Link
anchor
<a href="http://google.com">Google</a>
atributo que define para onde a
página deve navegar
Ref: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/a

82. E se quiséssemos colocar essa lista abaixo
da imagem?

83. Listas

84. Lista desordenada
unordered list
<ul>
<li>item da lista</li>
<li>outro item da lista</li>
</ul>

85. Fato 3 do HTML
Os elementos podem conter outros
elementos, formando uma estrutura de
hierarquia.

87. Semântica <3

88. Semântica <3
• Mecanismos de busca
• Tecnologias assistivas
• Leitores de tela
• Comandos de voz
Ref: https://www.w3.org/TR/2016/REC-html51-20161101/dom.html#elements-semantics

91. O que temos até aqui?

92. Expectativa Realidadex

94. CSS
Folhas de estilo em cascata

95. Como é feito um website?
HTML CSS JavaScript
Enviar Enviar Enviar

96. CSS
• Cascading Style Sheets (CSS), ou
Folhas de Estilo em Cascata
• Linguagem que estiliza o conteúdo do website.
Ou seja, define a aparência que os elementos terão!

97. Conectar HTML e CSS
• Há 3 maneiras de estilizar o HTML com CSS:
Incorporar
dentro da tag
<style></style>
Escrever inline como
um atributo style das
tags
Importar um
arquivo .css
externo

98. Conectar HTML e CSS
• Há 3 maneiras de estilizar o HTML com CSS:
Incorporar
dentro da tag
<style></style>
Escrever inline como
um atributo style das
tags
Importar um
arquivo .css
externo

99. Conectar HTML e CSS
• Há 3 maneiras de estilizar o HTML com CSS:
Incorporar
dentro da tag
<style></style>
Escrever inline como
um atributo style das
tags
Importar um
arquivo .css
externo

100. Conectar HTML e CSS
• Há 3 maneiras de estilizar o HTML com CSS:
Incorporar
dentro da tag
<style></style>
Escrever inline como
um atributo style das
tags
Importar um
arquivo .css
externo

101. Importar arquivos CSS externos
<link rel="stylesheet" type="text/css" href="style.css">
relação entre os
documentos tipo de arquivo
localização do
documento

102. p {
font-size: 22px;
}
Como estilizar tags com CSS

103. seletor {
propriedade: valor;
}
Como estilizar tags com CSS

104. NÃO SE ESQUEÇA DO PONTO E
VIRGULAAAAAAAAAAAAA

105. Por que antes de aplicarmos o CSS os textos já
tinham aparências diferentes?

106. Normalize CSS
• O browser aplica um estilo padrão no CSS
• Para anular esse CSS antes de começar o nosso, usamos um
"Normalize CSS"

107. Alteração de cores

108. Cor do parágrafo
p {
color: grey;
}

109. Cor do título
h1 {
color: #008b8b;
}

110. Sistemas de cores no CSS
• Nominal ver mais
red
• RGB ver mais
rgb(255,0,0)
• Hexadecimal ver mais
#FF0000
• HSL ver mais
hsl(0, 100%, 50%)
Ref: https://www.w3schools.com/colors/colors_picker.asp

111. Cor do fundo da página
body {
background-color: #f5f5f5;
}
Ref: https://www.w3schools.com/cssref/pr_background-color.asp

112. Formatação de textos

113. Fonte
Família Tipográfica
body {
font-family: 'Open Sans', Arial, sans-serif;
}
Ref: https://www.w3schools.com/cssref/pr_font_font-family.asp

114. Categorias genéricas de fontes
Sans-serif Serif Monospace Cursive Fantasy

115. Fontes no CSS
Opção 1
• Fontes devem estar instaladas no computador do usuário.
• Para garantir que o site fique com uma fonte semelhante à
utilizada, colocamos opções e uma categoria genérica.

116. Fontes no CSS
Opção 2
Utilizando fontes do Google Fonts (ou de outros provedores): inserir o
código no <head> e então utilizar a fonte no CSS
Ref: https://fonts.google.com/

117. Fontes no CSS
<link
href="https://fonts.googleapis.com/css
?family=Lato" rel="stylesheet">
HTML
<head>
CSS body {
font-family: 'Lato', sans-serif;
}

118. Fontes no CSS
Opção 3
Utilizando fontes embedadas por meio da propriedade
@font-face, definindo um nome de família tipográfica e
seu uso no código.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

119. Herança

120. Peso da fonte
h1 {
color: #008b8b;
font-weight: 300;
}
Ref: https://www.w3schools.com/cssref/pr_font_weight.asp

121. Alinhamento do texto
Ref: https://www.w3schools.com/cssref/pr_text_text-align.asp

122. Alinhamento do texto
body {
font-family: 'Open Sans', Arial, sans-serif;
text-align: center;
}
Ref: https://www.w3schools.com/cssref/pr_text_text-align.asp

123. Tamanho do texto
h3 {
font-size: 22px;
}
p {
color: grey;
font-size: 18px;
}

124. Tamanho do texto
h1 {
...
font-size: 60px;
}
h2 {
font-size: 24px;
}

125. Como estamos
agora?

126. I Like, I Wish

127. Até amanhã

128. Seu Primeiro Website
com HTML e CSS – Dia 2

129. Agenda
• Aquecimento
• Revisão
• CSS – aparência do site
• Alteração de tamanhos e espaçamentos
• Classificação de elementos
• Café
• Disposição e exibição de elementos
• Referências

130. Aquecimento
3 cérebros

131. O que temos até
aqui?

132. Quais <tags> nós conhecemos?

133. <h1>
<h2>
<p>
<h3>
<p>
<h3>
<p>
<p>
<img>
<a>

134. CSS
Folhas de estilo em cascata

135. Alteração de tamanhos
e espaçamentos

136. Unidades de medida
Relativas
%
Absolutas
px

137. Unidades de medida
• Relativas são definidas em relação a outra medida
• Absolutas são fixas, aparecem exatamente no tamanho especificado
Ref: https://www.w3schools.com/cssref/css_units.asp

138. Área de respiro entre os elementos
h1 {
...
margin-top: 80px;
}

139. Área de respiro entre os elementos
h2 {
...
margin-top: 80px;
margin-bottom: 22px;
}

140. Área de respiro entre os elementos
h3 {
...
margin-top: 60px;
margin-bottom: 22px;
}

141. Área de respiro entre os elementos
p {
margin-top: 10px;
}

142. Largura do conteúdo

143. Largura do conteúdo
section {
width: 80%;
}
Ref: https://developer.mozilla.org/pt-BR/docs/Web/CSS/width

144. Largura do conteúdo
section {
width: 80%;
}
Ref: https://developer.mozilla.org/pt-BR/docs/Web/CSS/width

145. Centralização do conteúdo
section {
width: 80%;
margin: 10px auto;
}

146. Largura da imagem
img {
width: 100%;
}

147. E se eu quisesse que meu <h1> ficasse
assim?

148. Box Model
h1 {
padding: 20px;
border: 3px solid gray;
margin: 30px;
}

149. Box Model

150. Vamos fazer no código?
• xx

151. Classificação de elementos

152. E se eu quisesse usar cores diferentes nos
títulos <h3>?

153. Classes
class
<h3>Flora</h3>
<h3>Fauna</h3>
Ref: https://www.w3schools.com/cssref/sel_class.asp

154. <h3>Flora</h3>
<h3 class=”item-alternativo">Fauna</h3>
Classes
class
Ref: https://www.w3schools.com/cssref/sel_class.asp

155. <h3>Flora</h3>
<h3 class=”item-alternativo">Fauna</h3>
Classes
class
atributo nome da classe

156. <h3>Flora</h3> h3 {
color: purple;
}
HTML CSS
<h3 class=”item-
alternativo">Fauna</h3>
.item-alternativo{
color: darkred;
}

157. Boa prática:
Utilizar classes!
Dica boa é dica compartilhada:

158. E aí, chegamos nesse resultado?

159. BÔNUS

160. E se eu quisesse criar um menu assim?

161. Disposição e exibição
de elementos

162. Float – para alinhar elementos - antigamente
• none
• left
• right
Ref: https://developer.mozilla.org/pt-BR/docs/Web/CSS/float

163. Float
None
• Valor padrão. Todos os
elementos por padrão, não
irão flutuar, ou seja,
possuem o valor float como
none.
float: none
none - mussum Ipsum, cacilds vidis litro
abertis. Quem num gosta di mim que vai
caçá sua turmis!

164. Float
Left
• Retira um elemento do
fluxo normal do
documento, flutuando-o à
esquerda;
• Faz com que textos e
elementos em linha o
contornem.
float: left
none - mussum Ipsum,
cacilds vidis litro abertis.
Quem num gosta di mim
que vai caçá sua turmis!

166. Float
Right
• Retira um elemento do
fluxo normal do
documento, flutuando-o à
direita;
• Faz com que textos e
elementos em linha o
contornem.
float: right
none - mussum Ipsum,
cacilds vidis litro abertis.
Quem num gosta di mim
que vai caçá sua turmis!

167. Float
Left/Right
• Por causa desse flutuar, é
utilizado para criação de
estruturas de layout.
Cabeçalho
left right
Rodapé

168. Se lembram do novo Header do UOL?

169. Vamos fazer no código?

171. Como alterar o alinhamento de uma
lista vertical para horizontal?

172. Display
Especifica o tipo de renderização de um elemento.
• block
• inline
• none
Ref: https://developer.mozilla.org/pt-BR/docs/Web/CSS/display

173. Display
Block
• Valor padrão da maioria dos
elementos.
• Exceções: <a>, <b>, <br>,
<em>, <i>, <img>, <small>,
<span> e <strong>;
• Define que o elemento será
renderizado como um
“bloco”;
block
block

174. Display
Block
• Ocupa toda a largura do
container pai.
block
block

175. Display
Inline
• Exibe o elemento em linha; inline inline

176. Display
Inline
• Fica com o tamanho a
que ele corresponde;
• As propriedades width e
height são
desconsideradas.
inline inline

177. Display
None
• Oculta o elemento da
página.
• Deixa o espaço livre para
ser utilizado por
elementos irmãos (Se
houver).

178. xx
• xx

179. Vamos fazer no código?

180. O que mais aprendemos?

181. Hoje vimos 2 linguagens:

182. Há muitas outras:

183. Continue
aprendendo!

184. Sites de referência
• W3C
https;//www.w3.org
• MDN - algumas páginas em português
https://developer.mozilla.org/pt-BR/docs/Web/HTML
• W3Schools - em inglês
https://www.w3schools.com/
• Stackoverflow - em português
https://pt.stackoverflow.com/
• HTML & CSS Is Hard (But it doesn’t have to be)
https://internetingishard.com/html-and-css/

185. Editores de código
• VSCode
https://code.visualstudio.com/
• Sublime text
https://www.sublimetext.com
• Atom
https://atom.io
• Comparação: https://www.codementor.io/mattgoldspink/best-text-editor-atom-
sublime-vim-visual-studio-code-du10872i7

186. Cursos online
Alura alura.com.br

187. Cursos online
Codecademy codecademy.com

188. Cursos online
Free Code Camp freecodecamp.org

189. Cursos online
Udacity udacity.com

190. Desafios online
HackerRank www.hackerrank.com

191. Desafios online
Exercism https://exercism.io/

192. Como publico minha página na Internet?

193. Publicação da página
• Para que outras pessoas possam acessar o site que você criou, é
necessário publicá-lo na internet. Para isso, você precisa:
• Comprar o domínio;
• Contratar um serviço de hospedagem.

194. Domínio
RegistroBR https://registro.br/

195. UOL Host https://uolhost.uol.com.br
Domínio

196. www.uol.com.br
pedido
arquivos
computador onde
estão os arquivos

197. Hospedagens
UOL Host https://uolhost.uol.com.br

198. Hospedagens
Zeit https://zeit.co

199. Hospedagens
Heroku https://www.heroku.com

200. Hospedagens
Netlify https://app.netlify.com/drop

201. Hospedagens
Netlify https://app.netlify.com/drop
• “Dropar” a pastado site na janela;
• Pronto! Só compartilhar!

202. co:lab

204. Site do co:lab
uol.com/colab

205. I Like, I Wish

206. Hora da fotooooooo!

207. Obrigado!
Material feito por Carlos Santana, Patricia Jenny e Yasminn Vaz.