Ebook Programacao Web Basico

Programação Web
(Básico)
Claudio Moisés Valiense de Andrade
Formação Inicial e
Continuada
+
IFMG
Programação Web (Básico)

1ª Edição
Belo Horizonte
Instituto Federal de Minas Gerais
2022
© 2022 by Instituto Federal de Minas Gerais
Todos os direitos autorais reservados. Nenhuma parte desta publicação poderá ser
reproduzida ou transmitida de qualquer modo ou por qualquer outro meio, eletrônico
ou mecânico. Incluindo fotocópia, gravação ou qualquer outro tipo de sistema de
armazenamento e transmissão de informação, sem prévia autorização por escrito do
Instituto Federal de Minas Gerais.
Pró-reitor de Extensão Carlos Bernardes Rosa Júnior

Diretor de Projetos de Extensão Niltom Vieira Junior
Coordenação do curso Claudio Moisés Valiense de Andrade
Arte gráfica Ângela Bacon
Diagramação Eduardo dos Santos Oliveira
FICHA CATALOGRÁFICA
Dados Internacionais de Catalogação na Publicação (CIP)
A554p Andrade, Claudio Moisés Valiense de.

Programação Web: Básico. / Claudio Moisés Valiense de
Andrade. – Belo Horizonte: Instituto Federal de Minas Gerais,
2022.
47 p. : il. color.
E-book, no formato PDF.

Material didático para Formação Inicial e Continuada.
ISBN 978-65-5876-042-9
1.Sistema Operacional. 2. HTML. 3.CSS. I. Andrade,

Claudio Moisés Valiense de. II. Título.
CDD 005.1
Catalogação: Rejane Valéria Santos - CRB-6/2907

Índice para catálogo sistemático:
1. Programação web - 005.1
2022
Direitos exclusivos cedidos à
Avenida Mário Werneck, 2590,
CEP: 30575-180, Buritis, Belo Horizonte – MG,
Telefone: (31) 2513-5157
Sobre o material
Este curso é autoexplicativo e não possui tutoria. O material didático,

incluindo suas videoaulas, foi projetado para que você consiga evoluir de
forma autônoma e suficiente.
Caso opte por imprimir este e-book, você não perderá a possiblidade
de acessar os materiais multimídia e complementares. Os links podem ser
acessados usando o seu celular, por meio do glossário de Códigos QR
disponível no fim deste livro.
Embora o material passe por revisão, somos gratos em receber suas
sugestões para possíveis correções (erros ortográficos, conceituais, links
inativos etc.). A sua participação é muito importante para a nossa constante
melhoria. Acesse, a qualquer momento, o Formulário “Sugestões para
Correção do Material Didático” clicando nesse link ou acessando o QR Code
a seguir:
Formulário de
Sugestões
Para saber mais sobre a Plataforma +IFMG acesse
www.ifmg.edu.br
Palavra do autor
Caro aluno seja bem-vindo ao curso de Formação Continuada

“Programação Web (Básico)”.
Dividido em quatro módulos, este curso irá discutir os conceitos básicos

na criação de sites, fazendo com o que o aluno entenda o funcionamento dos
componentes iniciais da programação web através de princípios teóricos e
práticos desenvolvendo habilidades para realizar a manutenção e criação de
websites.
O curso de programação web apresenta-se como uma alternativa viável
para formação de profissionais que ao final do curso terão amplas condições
de atender usuários/clientes residenciais ou empresariais, além da
possibilidade de fazerem parte de uma equipe de colaboradores de uma
empresa.
Bons estudos!
Apresentação do curso
Este curso está dividido em quatro semanas, cujos objetivos de cada uma são
apresentados, sucintamente, a seguir.
Nesta semana, vocês irão aprender sobre informática

básica, como funciona um editor de texto, navegador web,
SEMANA 1
configuração do computador e sobre a IDE que iremos
utilizar nas próximas aulas.
Nesta semana, você compreenderá os componentes

SEMANA 2 básicos do html, como tratar texto, inserir imagens, tabelas
e listas, além de alinhamento dos elementos.
Nesta semana, você compreenderá como funciona a

SEMANA 3 estilização de páginas html, diferentes tipos de estilização,
aplicação de cores, além alteração de fonte textual.
Nesta semana, você compreenderá um funcionamento do

framework Bootstrap, um dos frameworks mais populares
SEMANA 4 em programação web, que irá permitir aplicar novas
funcionalidades, além de possibilitar a criação de páginas
responsivas.
Carga horária: 40 horas.

Estudo proposto: 2h por dia em cinco dias por semana (10 horas semanais).
Apresentação dos Ícones
Os ícones são elementos gráficos para facilitar os estudos, fique atento

quando eles aparecem no texto. Veja aqui o seu significado:
Atenção: indica pontos de maior importância

no texto.
Dica do professor: novas informações ou

curiosidades relacionadas ao tema em estudo.
Atividade: sugestão de tarefas e atividades

para o desenvolvimento da aprendizagem.
Mídia digital: sugestão de recursos

audiovisuais para enriquecer a aprendizagem.
Sumário
Semana 1 – Informática Básica ....................................................................... 15

1.1. Conhecendo os componentes do computador .................................... 15
1.2. Sistema Operacional ............................................................................ 17
1.3. Ambiente de desenvolvimento ............................................................. 17
Semana 2 – Conhecendo o HTML .................................................................. 19
2.1 HTML .................................................................................................... 19
Semana 3 – Conhecendo o CSS ..................................................................... 26
3.1 CSS e formas de aplicação .................................................................. 26
3.2 Comandos do CSS ............................................................................... 28
Semana 4 – Conhecendo o Bootstrap ............................................................ 30
4.1. Importando Bootstrap ........................................................................... 30
4.2. Componentes do Bootstrap .................................................................. 31
Referências ...................................................................................................... 39
Currículo do autor ............................................................................................ 42
Glossário de códigos QR (Quick Response) ................................................... 43
1
Semana 1 – Informática Básica
Objetivos
Nesta semana, vocês irão aprender sobre informática básica,
como funciona um editor de texto, navegador web,
configuração do computador e sobre a IDE que iremos
utilizar nas próximas aulas.
Mídia digital: Antes de iniciar os estudos, vá até a sala

virtual e assista ao vídeo “Informática Básica”.
1.1. Conhecendo os componentes do computador
Entre os componentes que compõem o computador, destaco os principais, com uma

breve descrição de cada componente:
Gabinete: Um dos objetivos do gabinete é proteger os componentes de sujeira e
umidade. Destaco abaixo algumas informações que podem diferenciar um gabinete de
outro:
● Tamanho: Gabinetes possuem diferentes tamanhos, é preciso verificar se o
componente que deseja adicionar, cabe no gabinete, por exemplo, tem
placas de vídeo que são tão grandes que não cabem em qualquer gabinete;
● Quantidade de encaixes de Fans: Os Fans são ventoinhas que têm o objetivo
de circular do ar mais quente para fora do gabinete. Alguns gabinetes têm
diferentes encaixes de Fans o que permite circular melhor o ar e manter os
componentes com temperatura mais baixa evitando problema que ocorre
devido ao aquecimento dos componentes;
Placa mãe: Componente principal do computador, serve como base para encaixar
as diferentes peças que compõem um computador. Destaco abaixo algumas informações
que podem diferenciar uma placa mãe de outra:
● Socket do processador: Processadores têm diferentes encaixes, é preciso
escolher uma placa mãe que tenha um socket que seja compatível com o
processador que deseja inserir;
● Quantidade de slots de memória RAM: Uma placa mãe pode ter diferentes
quantidade de slots para encaixe da memória RAM, uma placa mãe com
mais slots permite conectar mais componentes de memória RAM.
● Entrada de disco permanente: Uma placa mãe possui entrada diferentes
permitindo que sejam acopladas diferentes dispositivos de entrada
permanente, sendo que os mais comum são IDE, SATA2, SATA3, NVME;
15
● Entrada e saídas nas laterais: Na lateral da placa mãe possui diferentes
entrada e saída, por exemplo, a entrada de teclado e mouse, uma placa mãe
pode diferenciar de outra pela possibilidade de variar essas entradas, por
exemplo, possuir entrada USB 3.0 ou saída HDMI;
Processador: Responsável por executar as tarefas do computador, por exemplo
realizar operações aritméticas nos dados. Destaco abaixo algumas informações que
podem diferenciar um processador de outro:
● Modelo: Os processadores possuem compatibilidade com algum socket de
processador específico, por exemplo, um processador pode ser compatível
apenas com o socket Intel LGA 1150 ou AMD AM4. Existem diferentes
encaixes do processador, o que pode diferenciar um processador de outro;
● Capacidade da memória cache: Memória de alta velocidade presente nos
processadores, quanto maior a capacidade, mais dados é possível
armazenar;
● Velocidade: Velocidade que o processador executa as tarefas, medido em
Gigahertz, quanto mais gigahertz, mais rápido é o processador;
● Quantidade de núcleos: Um único processador pode possuir mais de um
núcleo de execução, por exemplo, um processador com dois núcleos é
possível executar duas tarefas no mesmo momento.
Memória RAM: Armazenamento temporário do computador, ou seja, caso o
computador seja desligado, as informações que estão na memória são perdidas. Uma das
funcionalidades é a transferência das informações para o processador. Abaixo, algumas
maneiras que pode diferenciar uma memória RAM:
● Modelo: Tipos de modelos, sendo que os mais comuns são DDR1, DDR2,
DDR3 e DDR4;
● Capacidade: A capacidade de armazenamento medido em Megabyte, quanto
mais memória, mais informações é possível armazenar;
● Velocidade: Diferentes velocidades que é a medida da rapidez com que
conseguem acessar ou gravar dados, medida em megahertz (MHz);
Fonte: Componente responsável por alimentar eletricamente os componentes do
computador, convertendo a corrente alternada para a corrente contínua. Abaixo, algumas
maneiras que pode diferenciar uma fonte de alimentação:
● Potência: A potência da fonte é a quantidade de energia máxima que a fonte
consegue fornecer aos componentes, uma fonte de 1000w (Watts) tem mais
potência que uma de 500w. Cada componente exige uma certa quantidade de
potência elétrica, assim, é preciso verificar se a fonte que está escolhendo fornece
energia suficiente para as peças que deseja ligar, por exemplo, tem placa de vídeo
que exige fonte de 600w.
● Modelo: Fontes possuem diferentes modelo de saída, sendo as mais comuns as AT,
ATX e Modular;
● Selo de Qualidade: Existe um selo que garante que a fonte possua pelo menos 80%
de eficiência, que é chamada de 80 PLUS, uma eficiência de 80% significa que os
16
componentes estão utilizando 80% da energia e 20% está sendo liberada em forma
de calor;
Armazenamento permanente: Componente responsável por armazenar as
informações de forma permanente no computador. Abaixo, algumas maneiras que pode
diferenciar um armazenamento permanente:
● Tipos: Um dos tipos é o HD, que conta com processo mecânico, um disco
que fica girando em alta velocidade e sendo magnetizado para salvar as
informações. Outro tipo é o SSD Sata, que realiza o armazenamento de
dados em chips, com destaque que os SSD são mais silenciosos, mais leves
e têm uma maior velocidade.
● Velocidade: Diferentes tipos de armazenamento permanente oferecem
velocidade de leitura e escrita de dados de forma diferenciada, por exemplo,
realizar leitura de 1200 MB/s enquanto outro realiza 3000 MB/s;
● Capacidade: Capacidade de informação armazenada, por exemplo, existe
SSD que consegue armazenar 300GB de dados, enquanto outro, conseguem
armazenar 500 GB de dados, quanto maior, mais dados consegue
armazenar.
1.2. Sistema Operacional
Dica do Professor: Para conhecer melhor sobre os

componentes básicos e o sistema operacional, leia a
apostila “Informática básica para o estudo on-line”.
(download)
Um computador é acompanhado de algum sistema operacional que tem o objetivo

de gerenciar os componentes e servir como base de instalação para diversos programas,
por exemplo, a instalação do navegador Google Chrome. Dentre os sistemas operacionais,
os mais populares são o Windows e o Linux.
No Windows, é possível visualizar a configuração do sistemas acessando as
propriedades do sistema (visualizar na videoaula da semana), onde é possível visualizar o
modelo do processador, quantidade de memória e versão do Windows. Outra janela
interessante é o gerenciador de recursos onde é possível visualizar a quantidade de
recurso que cada processo está consumindo no sistema, por exemplo, qual o processo
que está consumindo mais recurso do processador? Qual processo está consumindo mais
memória RAM?
1.3. Ambiente de desenvolvimento
Neste curso utilizaremos o ambiente de desenvolvimento (IDE) Visual Studio Code,

que é um programa fornecido gratuitamente pela Microsoft. Utilizando uma IDE permite
obter diversas funcionalidades, das quais destaco algumas abaixo:
17
● Auto completar: Auto completa o código a partir de digitação das primeiras
letras que formam uma palavra reservada da linguagem, por exemplo, ao
digitar ‘<bo’, o programa sugere completar com ‘<body>’;
● Checagem de erros: Verifica se a funções digitadas existem na linguagem;
● Terminal integrado: Coloca o terminal de comandos disponível ser executado
na própria IDE;
● Coloração de palavras reservadas: A coloração diferente para palavras
reservadas da linguagem o que facilita a leitura e o desenvolvimento do
sistema como um todo.
A partir do código digitado na IDE, precisamos de um navegador web (por exemplo,

Chrome, firefox) para renderizar os comandos, por exemplo, ao digitar <fig src=
‘cachorro.jpg’ />, o navegador faz a leitura deste código e exibe uma imagem de um
cachorro. Utilizaremos uma IDE para visualizar o código que é interpretado pelo
navegador.
Reflita o que foi passado esta semana, verifique os locais para obter informações
sobre o seu computador e por fim testes as ferramentas sugeridas nesta semana. Se
necessário, releia o material. Reflita sobre as novas concepções que este módulo lhe
proporcionou e sobre como você poderia implementar essas práticas na sua vida
profissional!
Atividade: Para concluir a semana de estudos, vá até a

sala virtual e entre no fórum “Informações sobre os
componentes do computador"” e descreva como você
achou as informações dos componentes da sua
máquina no seu sistema operacional.
Nos encontramos na próxima semana.

Bons estudos!
18
Semana 2 – Conhecendo o HTML
Objetivos
Nesta semana, você compreenderá os componentes
básicos do html, como tratar texto, inserir imagens, tabelas e
listas, além de alinhamento dos elementos.
Mídia digital: Antes de iniciar os estudos, vá até a sala

virtual e assista ao vídeo “HTML”.
2.1 HTML
Na programação web é utilizada a linguagem de marcação de hipertexto (html), que

é uma linguagem construída em 1991 pelo pesquisador Tim Berners-Lee. Todo documento
html apresenta nomes que estão entre os sinais ‘<’ e ‘>’. Esses elementos são os
comandos de formatação da linguagem. Além do comando existe o atributo do comando e
o valor do atributo, a Figura 1, exemplifica o uso no carregamento de uma imagem de um
gato.
Figura 1: Exemplificando etiqueta no html.

Fonte: O próprio autor.
A Figura 2, apresenta um código html. Na linha 1 é definido que o padrão do documento é

html versão 5 (Freeman, 2014), na linha 2 temos o comando html que deve conter em
todos os arquivos html, seguido do atributo lang que define que o documento é da língua
português do Brasil. Na linha 3 iniciamos o bloco head, que contém o comando title, que
define o título da página, este título fica na parte superior do navegador, na descrição da
aba. Na linha 6 temos o body, que é o corpo do documento, no corpo contém um parágrafo
(comando p). Veja que nos comandos apresentados na figura, contém uma parte de
19
Plataforma +IFMG
abertura (<title>) e fechamento (</title>). Alguns comandos do html não precisam de

fechamento, esses são mais raros e podem ser encontrados na página oficial da
comunidade W3C (W3, 2022), que é responsável por definir os padrões da Web.
Figura 2: Código inicial html.

Dica do Professor: Execute o exemplo inicial na sua

máquina para prosseguir com os exemplos seguintes.
Continuando a explicar mais comando do html, temos a Figura 3 e 4, sendo que na Figura
3 temos o código e na Figura 4 temos a renderização do código. O início do código é
similar ao apresentado na Figura 2, nas linhas 7-9 são os cabeçalhos com os comandos do
h1 ao h6, sendo que quanto maior o número posterior ao h, menor fica o texto. Na linha 10,
temos o comando label, que coloca o texto sem dar um pulo de linha no final da escrita,
como podemos observar na Figura 4. Na linha 11 temos o comando pre, que coloca o texto
renderizado no mesmo formato que foi escrito no código, mantendo a tabulação e os pulos
de linhas. Na linha 15 temos o comando ‘b’ e ‘i’ que representam o negrito e itálico
respectivamente.
20
Plataforma +IFMG
Figura 3: Código para tratar texto.

Figura 4: Renderização do código apresentado na Figura 3.

Na Figura 5 e 6 estamos apresentando o uso de link, imagens, pulo de linha e

inserção de linha no html. Na linha 7 da Figura 5, temos o comando ‘a’ que insere links no
html, com o atributo ‘href’ e define para qual link o usuário irá após realizar o click no texto
‘Site IFMG’. Na linha temos o comando img, que insere uma imagem no html, o atributo src
define o caminho que a imagem deve ser localizada, neste caso o diretório do mesmo
arquivo html com o nome ‘logo_ifmg.png’, o segundo atributo é o ‘alt’, que define uma
descrição textual caso não seja possível carregar a imagem. Na linha 9 temos o comando
‘br’ que realiza um saldo de linha enquanto que o comando ‘hr’ insere uma linha no html.
21
Plataforma +IFMG
Figura 5: Código apresentando link e imagem.

Figura 6: Renderização do código apresentando link e imagem.

Na Figura 6 e 7, apresentamos a utilização de tabela no html. Na linha 7 com o

comando ‘table’ inicia o bloco de tabela, o comando ‘tr’ é utilizado para colocar uma nova
linha em uma tabela enquanto o comando ‘th’ define o cabeçalho da tabela, o comando ‘td’
define o conteúdo das células. A tabela apresenta duas linhas (tr) e três colunas (th e td).
22
Plataforma +IFMG
Figura 7: Exemplificação de tabela.

Figura 8: Renderização de tabela.

Na Figura 8 e 9, apresentamos a utilização de listas ordenadas e não ordenadas em

html. Em html para inserir uma lista não ordenada é utilizado o comando ‘ul’, iniciando na
linha 7, para cada item da lista, é utilizado o comando ‘li’. Na linha 14 temos o comando
‘ol’, que define lista ordenada (inserir um número sequencial antes de cada elemento), de
forma similar ao anterior, o comando ‘li’ insere cada elemento da lista. Na linha 20 temos o
comando ‘div’ que define uma caixa, onde a estilização definida na caixa é aplicadas nos
elementos internos.
23
Plataforma +IFMG
Figura 9: Exemplificação de listas.

Figura 10: Renderização de listas.

24
Plataforma +IFMG
Atividade: Para concluir essa semana de estudos, vá

até a sala virtual e entre no fórum “Comente uma boa
prática para criar um arquivo html”.
Mas uma semana se passou, reflita o que foi passado até aqui, busque informações
sobre html e páginas que você tenha interesse, aproveite a oportunidade para trocar
experiência com pessoas que têm experiência nessa área.
Nos encontraremos na próxima semana.

Bons estudos!
25
Semana
Semana 3
3 –– Conhecendo
Conhecendo o
o CSS
CSS
Objetivos
Nesta semana, você compreenderá como funciona a
estilização de páginas html, diferentes tipos de estilização,
aplicação de cores, além alteração de fonte textual.
Mídia digital: Antes de iniciar os estudos desta

semana, vá até a sala virtual e assista à videoaula
sobre “CSS”.
3.1 CSS e formas de aplicação
A página de estilo em cascata (css) é usada para estilizar os elementos escritos na

linguagem de marcação html (Silva, 2018). Por exemplo, podemos alterar a cor do texto,
alterar seu tamanho e escolher uma fonte diferente para um texto Além do texto podemos
estilizar elementos da página, como alterar a cor do fundo ou adicionar bordas em tabelas.
Existem três formas de aplicar o css na página html, abaixo descrevo cada uma:
inline: Utilizar o atributo ‘style’ dentro do elemento html, a Figura 11 a seguir
exemplifica o uso do formato inline definindo um parágrafo para a cor vermelha na linha 7.
Figura 11: Estilizando html

Fonte: Próprio autor
Figura 12: Renderização do código da Figura 11.

26
Plataforma +IFMG
Internal: Usar o comando style dentro do comando head do próprio arquivo (linha 5 -
7), a Figura 13 altera o parágrafo para a cor vermelha.
Figura 13: Estilizando com o comando style no head.

External: Define um arquivo externo que contém o código css. Na Figura 14, na
linha 5 utiliza o comando ‘link’ para referenciar o arquivo de estilo, sendo que o atributo ‘rel’
define o tipo do arquivo, que neste caso é o stylesheet, e o arquivo de referência (href) é o
estilo.css. A Figura 15 apresenta o que contém no arquivo estilo.css, onde contém apenas
a definição da cor do parágrafo para vermelho.
Figura 14: Exemplo utilizando estilização em arquivo externo.

Figura 15: Estilizando em arquivo externo.


Pró-Reitoria de Extensão
27
Plataforma +IFMG
3.2 Comandos do CSS
Nesta seção vamos abordar os comandos mais populares utilizados no css. A

Figura 16 exemplifica a utilização da mudança de fundo para laranja (linha 6), enquanto o
h1 e p mudam para a cor azul e vermelho respectivamente. Na linha 13 há uma mudança
do tamanho da fonte para o tamanho de 60px, na linha 14 a mudança do tipo da fonte,
enquanto na linha 15 o alinhamento do texto definido como central. A Figura 17 apresenta
a renderização do código apresentado na Figura 17.
Figura 16: Exemplificando cores e texto.

Figura 17: Renderização do estilo definido na Figura 16.

A Figura 18 apresenta a estilização de uma tabela, na linha 7 define que a

estilização será aplicada aos comandos table, th e td onde é definido o comando 'border',

28
Plataforma +IFMG
na qual define o tamanho da borda, o tipo da borda e a sua cor. A Figura 19 renderiza a
tabela com borda.
Figura 18: Exemplificar estilização em tabela.

Figura 19: Tabela com borda.

Atividade: Para concluir a terceira semana de estudos,
vá até a sala virtual e participe do fórum “Sugira links de
página com CSS que você achou interessante e tente
entender como funciona”.
Mais uma semana terminou, dê uma pausa e reflita. Execute os exemplos desta
semana e tente modificar o CSS para um estilo que seja mais agradável para você.
Nos encontraremos na próxima semana.

Bons estudos!

29
Semana
Semana 4
4 –– Conhecendo
Conhecendo o
o Bootstrap
Bootstrap
Objetivos
Nesta semana, você compreenderá um funcionamento do
framework Bootstrap, um dos frameworks mais populares em
programação web, que irá permitir aplicar novas
funcionalidades, além de possibilitar a criação de páginas
responsivas.
Mídia digital: Antes de iniciar os estudos desta

semana, vá até a sala virtual e assista à videoaula
sobre “Bootstrap”.
4.1. Importando Bootstrap
O Bootstrap é um framework front-end gratuito para desenvolvimento web. Entre as

suas funcionalidades, ele permite desenvolvimento de sites responsivos que se ajustam
automaticamente para que tenham uma boa aparência em diferentes tamanhos de telas,
com a de telefones pequenos a grandes desktops.
Para a utilização do bootstrap é preciso que seja baixado os seus respectivos
arquivos css e javascript, como apresenta a Figura 20. A linha 5 importa o css do bootstrap
e a linha 6 o código javascript do bootstrap, ambas as linhas tem a informação da versão
do bootstrap, que neste caso, é a versão 5.1.3, onde tais links podem ser obtidos no site
oficial do framework. Uma classe importada é a classe ‘container’ (linha 10), que define
uma caixa responsiva que ocupará toda a linha, nesta caixa deverá ser inserido os demais
elementos html, além disso, esta caixa define uma distância fixa da margem esquerda e
direita. A Figura 21 apresenta a renderização do código da Figura 20.

Pró-Reitoria de Extensão 30
Figura 20: Exemplificação do uso de Bootstrap.
Figura 21: Renderização do código da Figura 20.
4.2. Componentes do Bootstrap
No bootstrap existe uma divisão de páginas em linhas e colunas, para isso utilizamos a
class ‘row’ que define as linhas e a classe ‘col’ que define as colunas. Uma linha pode ser
dividida em no máximo doze colunas, o exemplo da Figura 22 estamos criando uma página
com uma linha (linha 12) e três colunas (linhas 13-15), por padrão, o bootstrap divide o
espaço entre as colunas de forma igual, que neste caso, 33.3% para cada coluna. Para
facilitar a visualização, foi adicionado uma borda nas colunas (comando border). A Figura
23 é a renderização do código.

Figura 22: Organização do conteúdo em bootstrap.
Figura 23: Renderização da organização do conteúdo em bootstrap.

Em bootstrap, é possível definir que uma coluna ocupe mais espaço que outra, no
caso da Figura 24, estamos definindo que uma coluna irá utilizar cinco posições dos doze
espaço do bootstrap (linha 13), e a outra coluna irá utilizar os outros sete espaços (linha
14).
Figura 24: Exemplificando o uso de mais espaço por uma coluna.


Figura 25: Renderização código da Figura 24.
No html temos o comando h1 onde podemos definir o cabeçalho. No Bootstrap,

temos a classe h1 (linha 13), para uma situação que queremos que o texto fique no
formato do comando h1, mas não podemos utilizar o comando h1, desta forma podemos
utilizar a classe dentro de outro comando, que neste caso, é o comando ‘<p>’ (linha 13).
Além disso, podemos dar destaque ao cabeçalho no Bootstrap utilizando a classe ‘display’,
que alterar o tamanho e o tipo de fonte de cabeçalho, de forma similar ao comando ‘h’,
temos vários tamanho, display-1, display-3, utilizados nas linhas 14 e 15.
Figura 26: Utilizando cabeçalhos em Bootstrap.

Figura 27. Renderização utilizando cabeçalho em Bootstrap.


A utilização de tabelas no bootstrap pode ser definida com a classe ‘table’, onde
podemos visualizar uma alteração das margens e distância entre os elementos. Neste
caso, basta apenas adicionar a classe table no comando table (linha 11). É possível
adicionar estilização na tabela, por exemplo, ao adicionar ‘table-striped’ ao lado de table, é
adicionado um fundo cinza nas linhas ímpares das tabelas. Outro tipo de estilização, é
utilizando o ‘.table-houver’ ao lado do ‘table’, como resultado, ao passar o mouse pela
linha, é alterado a cor de fundo da linha.
Figura 28: Utilizando tabela com bootstrap.

Figura 29: Renderização de tabela no bootstrap.

Na manipulação de imagens com bootstrap, podemos definir que uma imagem

tenha o canto arrendado, com a classe ‘rounded’, definido na linha 11 da Figura 30, além
disso, podemos fazer com que a imagem seja circular, com a classe ‘rounded-circle’,
definido na linha 12 ou podemos definir que a imagem seja responsiva, que,
independentemente do tamanho da tela do dispositivo, mantenha a mesma proporção de
largura e altura, com a classe ‘img-fluid’, definido na linha 13.

Figura 30: Utilizando imagens com bootstrap.
Figura 31: Renderização de imagens com bootstrap.

Em alguns sistemas web, as vezes solicitamos que o usuário aguarde para concluir
uma solicitação, por exemplo, ao realizar upload de um arquivo, no bootstrap é possível
exibir um botão que fica girando através da classe ‘spinner’ (linha 11), a Figura 33,
apresenta um botão de carregamento.
Figura 32: Botão giratório com bootstrap.


Figura 33: Renderização do botão giratório.
Para evitar a exibição de uma grande quantidade de conteúdo de uma vez,

podemos exibir parte dele, à medida que o usuário escolha o que deseja visualizar, no
bootstrap é possível criar botões que permitem que parte do conteúdo só seja visível
depois do clique, é possível utilizar a classe ‘collapse’ para conseguir este efeito. A Figura
35 apresenta um botão com o texto ‘IFMG’, e ao clicar neste botão aparece o texto, ‘O
IFMG surgiu em…’.
Figura 34. Botão para alterar a visibilidade do conteúdo.

Figura 35: Renderização do botão de alterar a visibilidade do conteúdo.

Na maior parte dos sistemas web, existe um menu onde o usuário é possível
realizar uma seleção do conteúdo que esteja interessado, no bootstrap é possível criar um
menu através do nav-tabs (linha 11), onde cada item do menu tem a classe ‘nav-item’
(linha 12), e cada item é direcionado para uma parte do conteúdo, através do href. Na
parte de definição do conteúdo, temos a classe ‘tab-content’ (linha 19), onde definimos o
conteúdo de cada item do menu, com a identificação que colocamos no ‘href‘ no link do
menu. Neste momento definimos o efeito do menu, que no caso é um efeito de
desaparecer um conteúdo e aparecer outro, neste caso, o efeito ‘fade’ (linha 21).

Figura 36: Menu em bootstrap.
Figura 37: Renderização do menu em bootstrap.

Espero com este curso que você consiga criar páginas web, conseguir entender
códigos e atualizar páginas existentes. A partir deste curso, desejo que você consiga
desenvolver seus projetos pessoais e consiga buscar novas funcionalidades para
aprimorar seus conhecimentos, incentivo a buscar outros cursos na plataforma +IFMG,
como o curso programação web (avançado), dentre as funcionalidade, busco ensinar como
tratar requisições do usuário no lado do servidor ou como realizar a integração com banco
de dados.
Este modelo guiado (autocontido) de e-book deve propiciar autonomia e, juntamente
com as videoaulas, possibilitar a plena capacidade de aprendizagem (lembre-se: não
haverá tutoria!). Deste modo, a sala virtual será simplificada e de fácil usabilidade (servirá
basicamente para a inclusão dos vídeos e atividades avaliativas).
Atividade: Para concluir o curso e gerar o seu
certificado, vá até a sala virtual e responda ao
Questionário “Avaliação geral”. Este teste é constituído
por 10 perguntas de múltipla escolha, que se baseiam
em todo o curso.
Parabéns pela conclusão do curso. Foi um prazer tê-lo conosco!

Parabéns pela conclusão do curso. Foi um prazer tê-lo conosco!

Referências
Wilsovelton. Informática Básica para o estudo on-line. 2020.
W3. Disponível em: <https://www.w3schools.com/>. Acesso em: 14 julho. 2022.
Freeman, Eric. Use a Cabeça! Programação em HTML 5. Alta Books Editora, 2014.
Silva, Maurício Samy. Fundamentos de HTML5 e CSS3. Novatec Editora, 2018.
39
40
41
Currículo do autor
Realizou Mestrado em Computação Aplicada na Universidade Estadual de

Feira de Santana. Possui Especialização em Banco de Dados no Centro
Universitário Claretiano. Possui Bacharelado em Ciência da Computação na
Universidade Estadual de Santa Cruz. Atualmente é professor no Instituto
Federal de Minas Gerais no Campus Ponte Nova.
.
Currículo Lattes: http://lattes.cnpq.br/9443774889076411
Feito por (professor-autor) Data Revisão de layout Data Versão
Claudio Moisés Valiense de

13/07/2022 Desginado pela proex 14/07/2022 1.0
Andrade
42
Glossário de códigos QR (Quick Response)
Mídia digital Dica do professor

Apresentação do
Informática básica
curso e informática
para o estudo on-line
básica
Dica do professor Mídia digital

HTML CSS
Dica do professor
Bootstrap
43
44
Plataforma +IFMG
Formação Inicial e Continuada EaD
A Pró-Reitoria de Extensão (Proex), desde o ano de

2020, concentrou seus esforços na criação do Programa
+IFMG. Esta iniciativa consiste em uma plataforma de cursos
online, cujo objetivo, além de multiplicar o conhecimento
institucional em Educação a Distância (EaD), é aumentar a
abrangência social do IFMG, incentivando a qualificação
profissional. Assim, o programa contribui para o IFMG
cumprir seu papel na oferta de uma educação pública, de
qualidade e cada vez mais acessível.
Para essa realização, a Proex constituiu uma equipe
multidisciplinar, contando com especialistas em educação,
web design, design instrucional, programação, revisão de
texto, locução, produção e edição de vídeos e muito mais.
Além disso, contamos com o apoio sinérgico de diversos
setores institucionais e também com a imprescindível
contribuição de muitos servidores (professores e técnico-
administrativos) que trabalharam como autores dos materiais
didáticos, compartilhando conhecimento em suas áreas de
atuação.
A fim de assegurar a mais alta qualidade na produção destes cursos, a Proex
adquiriu estúdios de EaD, equipados com câmeras de vídeo, microfones, sistemas de
iluminação e isolação acústica, para todos os 18 campi do IFMG.
Somando à nossa plataforma de cursos online, o Programa +IFMG disponibilizará
também, para toda a comunidade, uma Rádio Web Educativa, um aplicativo móvel para
Android e IOS, um canal no Youtube com a finalidade de promover a divulgação cultural e
científica e cursos preparatórios para nosso processo seletivo, bem como para o Enem,
considerando os saberes contemplados por todos os nossos cursos.
Parafraseando Freire, acreditamos que a educação muda as pessoas e estas, por
sua vez, transformam o mundo. Foi assim que o +IFMG foi criado.
O +IFMG significa um IFMG cada vez mais perto de você!
Professor Carlos Bernardes Rosa Jr.

Pró-Reitor de Extensão do IFMG
Características deste livro:
Formato: A4
Tipologia: Arial e Capriola.
E-book:
1ª. Edição
Formato digital

Ebook Programacao Web Basico

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ebook Programacao Web Basico

Enviado por

Direitos autorais:

Formatos disponíveis

Programação Web

Claudio Moisés Valiense de Andrade

Programação Web (Básico)

Pró-reitor de Extensão Carlos Bernardes Rosa Júnior

A554p Andrade, Claudio Moisés Valiense de.

E-book, no formato PDF.

1.Sistema Operacional. 2. HTML. 3.CSS. I. Andrade,

Catalogação: Rejane Valéria Santos - CRB-6/2907

Este curso é autoexplicativo e não possui tutoria. O material didático,

Para saber mais sobre a Plataforma +IFMG acesse

Caro aluno seja bem-vindo ao curso de Formação Continuada

Dividido em quatro módulos, este curso irá discutir os conceitos básicos

Nesta semana, vocês irão aprender sobre informática

Nesta semana, você compreenderá os componentes

Nesta semana, você compreenderá como funciona a

Nesta semana, você compreenderá um funcionamento do

Carga horária: 40 horas.

Os ícones são elementos gráficos para facilitar os estudos, fique atento

Atenção: indica pontos de maior importância

Dica do professor: novas informações ou

Atividade: sugestão de tarefas e atividades

Mídia digital: sugestão de recursos

Semana 1 – Informática Básica ....................................................................... 15

Mídia digital: Antes de iniciar os estudos, vá até a sala

1.1. Conhecendo os componentes do computador

Entre os componentes que compõem o computador, destaco os principais, com uma

1.2. Sistema Operacional

Dica do Professor: Para conhecer melhor sobre os

Um computador é acompanhado de algum sistema operacional que tem o objetivo

1.3. Ambiente de desenvolvimento

Neste curso utilizaremos o ambiente de desenvolvimento (IDE) Visual Studio Code,

A partir do código digitado na IDE, precisamos de um navegador web (por exemplo,

Atividade: Para concluir a semana de estudos, vá até a

Nos encontramos na próxima semana.

Mídia digital: Antes de iniciar os estudos, vá até a sala

Na programação web é utilizada a linguagem de marcação de hipertexto (html), que

Figura 1: Exemplificando etiqueta no html.

A Figura 2, apresenta um código html. Na linha 1 é definido que o padrão do documento é

abertura (<title>) e fechamento (</title>). Alguns comandos do html não precisam de

Figura 2: Código inicial html.

Dica do Professor: Execute o exemplo inicial na sua

Figura 3: Código para tratar texto.

Figura 4: Renderização do código apresentado na Figura 3.

Na Figura 5 e 6 estamos apresentando o uso de link, imagens, pulo de linha e

Figura 5: Código apresentando link e imagem.

Figura 6: Renderização do código apresentando link e imagem.

Na Figura 6 e 7, apresentamos a utilização de tabela no html. Na linha 7 com o

Figura 7: Exemplificação de tabela.

Figura 8: Renderização de tabela.

Na Figura 8 e 9, apresentamos a utilização de listas ordenadas e não ordenadas em

Figura 9: Exemplificação de listas.

Figura 10: Renderização de listas.

Atividade: Para concluir essa semana de estudos, vá

Nos encontraremos na próxima semana.

Mídia digital: Antes de iniciar os estudos desta

3.1 CSS e formas de aplicação

A página de estilo em cascata (css) é usada para estilizar os elementos escritos na

Figura 11: Estilizando html

Figura 12: Renderização do código da Figura 11.

Figura 13: Estilizando com o comando style no head.

Figura 14: Exemplo utilizando estilização em arquivo externo.

Figura 15: Estilizando em arquivo externo.

Instituto Federal de Minas Gerais