codelab@ime.usp.br
Grupo de extensão universitária que como objetivo estimular a inovação tecnológica na USP
2023
Facebook:
Este trabalho do USPCodeLab está licenciado com uma Licença Creative Commons - Atribuição 4.0 Internacional
O USPCodeLab é um grupo de extensão que tem como objetivo estimular a inovação tecnológica na USP
Compartilhar conhecimento e solução de problemas através do desenvolvimento de softwares
webdev
devboost
bits
hackathons
Desenvolvimento web é a área da tecnologia voltada à construção de sites, aplicativos, softwares, bancos de dados e quaisquer outras ferramentas que, de certa forma, constroem a internet como a conhecemos hoje
introdução ao desenvolvimento web
protocolo http
programação assíncrona
servidores
responsividade
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello, World!.</p>
</body>
</html>
body {
font-family: Arial;
}
p {
color: blue;
}
function born() {
alert( 'Hello, world!' );
}
14/abr
23/jun
10 aulas
+ laboratórios extras no Youtube
Cada aula terá uma tarefa
Dúvidas
Avisos
Necessárias para emissão do certificado
Não!
internet é o sistema de redes interconectadas
web é um sistema para acessar conteúdo através da internet
FRONTEND
BACKEND
yper
ext
arkup
anguage
não é uma linguagem de programação
Texto puro
(plain text)
Olá, mundo!
Texto rico
(rich text)
Hiperlink
Não existe rosa sem espinhos.
<bold>Não</bold> existe
<color>
<param>pink</param>rosa
</color>
sem
<i>espinhos.</i>
Agora podemos colocar
<a href="https://uclab.xyz/">
links
</a>
clicáveis
Agora podemos colocar links clicáveis
Olá, mundo!
São unidades básicas de uma página
Indicam, agrupam ou adicionam significado
<tag-autocontida />
<tag>abre e fecha</tag>
<img src="foto.jpg"/>
<h1>título</h1>
Tipos de tags
Exemplos
<
>
Anatomia de uma Tag
<p>Meu gato é mal</p>
Conteúdo
Abertura e fechamento de tag
Elemento
Atributos
<p id="about-cat">Meu gato é mal</p>
Podemos usar tags dentro de outras tags e concatena-las
<p>Meu gato é <b>MUITO</b> mal</p>
<img src="gato.png"/>
Resultado:
<!doctype html>
<html>
<head>
<title>Olá, Mundo!</title>
</head>
<body>
<h1>Esta é minha página</h1>
Para saber mais sobre HTML,
<a href="https://mdn.dev/">
entre aqui
</a>.
</body>
</html>
html
head
body
title
a
h1
href
"Esta…"
"entre aqui"
metadados
exibição
assinatura
Crie uma página pessoal que contém:
Agradecemos a atenção!
:)
By codelab@ime.usp.br
Hello, USPCodeLab e Webdev
Grupo de extensão universitária que como objetivo estimular a inovação tecnológica na USP