Guia Básico _ Programação Web

Prévia do material em texto

Introdução à Web e à Programação 
A Internet é uma grande rede mundial de computadores interligados. Sobre essa 
rede rodam vários serviços, e um deles é a World Wide Web (Web), que é um 
sistema de páginas ligadas por links. Os sites são conjuntos dessas páginas 
exibidas em programas chamados navegadores (como Chrome ou Firefox). Para 
criar essas páginas usamos linguagens de programação e de marcação. 
Programação é o processo de dar instruções a um computador para resolver 
problemas ou realizar tarefas. Por exemplo, quando um site mostra uma animação 
ou responde ao clique de um botão, isso foi feito com programação. Já as páginas 
da Web são criadas com HTML, CSS e JavaScript, que juntos formam a “receita” de 
um site. 
Curiosidade: A Web foi inventada em 1989 pelo cientista Tim 
Berners-Lee, que criou o primeiro servidor e navegador web em 1990. 
O que é o HTML? 
HTML significa HyperText Markup Language (Linguagem de Marcação de 
Hipertexto). É a base de todas as páginas da web, responsável pela estrutura 
e conteúdo (como textos, imagens, links, títulos, parágrafos, etc.). 
Estrutura básica de uma página HTML 
 
 
 
 Título da Página 
 
 
 
 Olá, Mundo! 
 Este é um parágrafo. 
 
 
● : Diz ao navegador que é um documento HTML5. 
● : Começo do documento HTML. 
● : Contém informações da página (título, codificação, links externos). 
● : Tudo o que aparece na tela do site está aqui. 
O HTML é formado por tags, que são palavras entre . Por exemplo, abre 
um título e fecha; abre um parágrafo e fecha. Algumas tags comuns: 
● a para títulos (h1 = maior / h6 = menor). 
● para parágrafos de texto. 
● para imagens. 
● para criar links (o atributo href aponta o destino). 
Cada tag pode ter atributos para dar mais detalhes (como src, alt, href ou id). Eles 
ficam dentro da tag de abertura. Por exemplo: . 
Tag Função Exemplo 
 a Títulos (do maior ao menor) Bem-vindo 
 Parágrafos Texto do parágrafo. 
 Links Clique aqui 
 Imagens 
 / Listas (não ordenada / ordenada) Item 
 Divisão genérica Conteúdo 
 Quebra de linha TextoNova linha 
 
 
 
 
 
Introdução ao CSS 
O CSS (Cascading Style Sheets, ou Folha de Estilo em Cascata) é a linguagem 
usada para estilizar a página – cores, fontes, tamanhos e posições. Enquanto o 
HTML organiza o conteúdo (esqueleto), o CSS define a aparência (roupa, cores, 
fontes). Por exemplo, podemos dizer que queremos que um parágrafo fique com 
texto azul e em tamanho grande. Isso seria feito com CSS. 
O CSS pode ser aplicado de três formas principais: 
● Inline (na própria tag html): usando o atributo style. Exemplo: 
Texto azul. 
● Interno (no cabeçalho): dentro de uma tag no do HTML. 
Exemplo: 
 
 p { 
 color: green; 
 } 
 
● Externo (arquivo separado): criando um arquivo .css (por exemplo 
estilos.css) e incluindo no com . 
● Os estilos CSS têm a forma seletor { propriedade: valor; }. Por exemplo, p { 
color: red; } muda a cor do texto dos parágrafos para vermelho. 
Principais propriedades CSS (básicas): 
Propriedade O que faz Exemplo 
color Cor do texto color: red; 
background-color Cor de fundo background-color: yellow; 
font-size Tamanho da fonte font-size: 16px; 
text-align Alinhamento do texto text-align: center; 
margin Espaço externo margin: 20px; 
padding Espaço interno padding: 10px; 
border Borda border: 1px solid black; 
Noções básicas de JavaScript 
O JavaScript é a linguagem de programação usada para tornar as páginas 
interativas. Com JS podemos responder a cliques, mostrar mensagens, atualizar o 
conteúdo da página sem recarregar e criar efeitos dinâmicos. Pense no JS como as 
partes móveis de uma página: enquanto o HTML é o esqueleto e o CSS são as 
roupas, o JavaScript são os músculos e sensores que reagem. 
Exemplos simples: 
Caixa de aviso (alert): 
Usamos alert("Mensagem") para exibir uma janela pop-up com uma mensagem. Por 
exemplo, o seguinte código mostra um alerta com “Olá!” quando o usuário clica no 
botão: 
 
 Clique aqui 
● O método alert() exibe uma caixa de diálogo de aviso. 
 
 
 
 
 
Alterar texto de um elemento: 
Podemos mudar o conteúdo de um elemento HTML usando innerHTML. Primeiro 
damos um id ao elemento; depois, pelo JavaScript, selecionamos esse elemento e 
mudamos seu conteúdo. Por exemplo: 
 
 Texto original 
 
 Mudar texto 
 
● Aqui, ao clicar no botão, o parágrafo com id="demo" terá seu texto alterado 
para “Novo texto!”. A propriedade innerHTML define ou obtém o conteúdo 
HTML interno de um elemento. 
 
Glossário de termos importantes 
● Internet: a rede mundial de computadores (sistema de redes 
interconectadas). 
 
● World Wide Web (Web): sistema de páginas e sites interligados acessíveis 
pela Internet. 
 
● Navegador: programa (aplicativo) que carrega e exibe páginas web (por 
exemplo, Chrome, Firefox). 
 
● Site (ou página web): conjunto de páginas HTML relacionadas; cada página 
é um arquivo .html. 
 
● HTML: HyperText Markup Language, linguagem de marcação usada para 
estruturar o conteúdo da web (texto, títulos, listas, etc.). 
 
● CSS: Cascading Style Sheets, linguagem de estilos usada para formatar 
visualmente (cores, fontes, layout) o conteúdo definido em HTML. 
 
● JavaScript: linguagem de programação (scripts) que adiciona interatividade 
e dinâmica às páginas web. 
 
● Tag/Elemento HTML: peça fundamental do HTML. Uma tag é um comando 
escrito entre (por exemplo, , ), e um elemento é o conteúdo 
completo da tag (exemplo: Este é um parágrafo.). As tags definem 
partes da página, como títulos, parágrafos e imagens. 
 
● Atributo: informação adicional que se coloca na tag. Por exemplo, em , src e alt são atributos que descrevem o 
elemento. 
 
● Script: bloco de código JavaScript. Pode ser colocado dentro de 
… no HTML. 
 
● Seletores CSS: palavras-chave (como o nome de uma tag ou #id ou .classe) 
que escolhem elementos para estilizar. Por exemplo, p { color: red; } aplica 
estilo a todos os . 
 
● Propriedade CSS: característica de estilo (como color, font-size, margin) 
definida dentro das regras CSS para dar aparência aos elementos. 
 
Cada termo acima é fundamental para entender como funcionam os sites. Domine o 
básico e você poderá criar páginas cada vez mais completas! 
 
	Introdução à Web e à Programação 
	Estrutura básica de uma página HTML 
	 
	 
	 
	 
	 
	Introdução ao CSS 
	Noções básicas de JavaScript 
	Exemplos simples: 
	Glossário de termos importantes