WebDev

hello, world.

Aula 1

2023

USPCodeLab

Facebook:

https://facebook.com/uspcodelab/

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

Site:

https://codelab.ime.usp.br/

Iniciativas

Compartilhar conhecimento e solução de problemas através do desenvolvimento de softwares

webdev

devboost

bits

hackathons

O que é o webdev?

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

O que é o webdev?

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!' );
}

Por que aprender sobre Web?

Agenda do curso

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

Internet e Web: mesma coisa?

Não!

internet é o sistema de redes interconectadas

web é um sistema para acessar conteúdo através da internet

Arquitetura da web

FRONTEND

BACKEND

O que é HTML?

H

T

M

L

yper

ext

arkup

anguage

linguagem de marcação

de hypertexto

interpretada pelo navegador

não é uma linguagem de programação

O que é HTML?

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!

O que é HTML?

https://www.linux.ime.usp.br/

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>

Tags

Tipos de tags

Exemplos

Tags

Anatomia de uma Tag

<p>Meu gato é mal</p>

Conteúdo

Abertura e fechamento de tag

Elemento

Tags

Atributos

🔗 MDN: Elementos HTML

<p id="about-cat">Meu gato é mal</p>

Tags

Podemos usar tags dentro de outras tags e concatena-las

<p>Meu gato é <b>MUITO</b> mal</p>
<img src="gato.png"/>

Resultado:

Estrutura

<!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

href

"Esta…"