Aula 1 - Desenvolvimento WEB
- Escreva abaixo qual o seu entendimento sobre Desenvolvimento WEB;
- Veja a linha do tempo de criação de algumas importantes linguagens;
- Veja também os itens que você deve ter para criar uma página WEB simples.
Aula 2 - Criar a primeira página com HTML
Objetivo: Aprender HTML na prática!
<html>
<head>
<title>Primeira Página</title>
<head>
<body>
<p>Estamos criando a primeira página com HTML</p>
<body>
</html>Abra seu arquivo com esse código em um navegador e verifique qual foi o resultado!
Nesse código encontramos as Tags HTML, que são os comandos utilizados para organizar o conteúdo de uma página web. Quando o navegador encontra uma Tag ele executa uma instrução na tela.
Temos as seguintes Tags:
<html>
Principal Tag html.
Dentro dela ficam todas as demais tags.<head>
Tag de Cabeçalho.
Contém definições e links importantes da página.
Seu conteúdo não aparece no corpo da página.<title>
Utilizada para dar um título a página.
Seu conteúdo é exibido na Aba do Navegador.<body>
Aqui fica o conteúdo visível.
Dentro dessa tag são colocadas todas as tags que exibem algo para o usuário.<p>
É uma tag que exibe um texto simples na tela.
É um parágrafo de texto.A maiorias das Tags HTML possuem a tag de Abertura e de Fechamento. Escreva abaixo a Tag de abertura e de fechamento das seguintes Tags:
- html
- head
- body
- title
- p
Aula 3 - Melhorando nosso primeiro código
<!DOCTYPE html>
Essa tag indica ao navegador qual a versão do HTML estamos utilizando, no nosso caso, o HTML5, que é o padrão atual da linguagem.
Agora vamos definir o idioma que utilizamos, no nosso caso ele é o pt-BR. Ele será acrescentado dentro da tag <html>
<html lang="pt-BR">Note que acrescentamos um atributo chamado lang e definimos uma valor para ele pt-BR.
Precisamos garantir que textos que possuem acentuação sejam exibidos corretamente. As versões mais atuais dos navegadores já tratam esse tipo de problemas, mas para garantir que um texto será exibido corretamente temos que colocar a seguinte tag:
<meta charset="UTF-8">Essa tag deve ser colocada dentro da tag <head>.
Agora vamos aproveitar e adicionar um título para a nossa páginas, utilizando a tag <h1>. Ela deve ser colocada dentro da tag <body> acima da tag <p>, para dar o efeito de um texto principal.
<h1>Minha primeira página!</h1>Temos então uma melhora significativa em nossa primeira página e agora ela se tornou a nossa estrutura básica, onde dentro dela iremos acrescentar todas as demais tags, estudando seus atributos e propriedades.
- Refaça o seu primeiro código de maneira a refletir essas alterações importantes.
Aula 4 - Explorando as Tags de Texto
<body>
<h1>A história da internet</h1>
<p>
A internet surgiu como um projeto militar nos Estados Unidos, chamado ARPANET,
na década de 1960. Com o tempo, evoluiu e se tornou uma rede global que conecta
bilhões de pessoas.
</p>
<h2>A expansão nos anos 90</h2>
<p>
Nos anos 1990, a internet começou a se popularizar com o surgimento dos navegadores
e páginas web. Foi nesse período que empresas e usuários comuns passaram a ter acesso
mais fácil à rede.
</p>
<h3>A internet hoje</h3>
<p>
Atualmente, a internet é parte essencial da vida moderna. Ela conecta pessoas,
possibilita o comércio eletrônico, redes sociais e o acesso rápido à informação.
</p>
</body>Ao utilizarmos as tag de título estamos destacando todo o texto que fica entre as tags, mas podemos dar ênfase em uma parte do texto, como uma palavra ou um trecho que queremos chamar a atenção do leitor para ele.
Vamos utilizar dois estilos: o negrito e o itálico.
Utilizando o último parágrafo, vamos deixar a palavra : essencial em negrito e a palavra eletrônico em itálico.
<p>
Atualmente, a internet é parte <b>essencial</b> da vida moderna. Ela conecta pessoas,
possibilita o comércio <i>eletrônico</i>, redes sociais e o acesso rápido à informação.
</p>Veja que adicionamos as tags:
- <b> para negrito (bold) e
- <i> para itálico (italic).
Pesquise qual é a outra tag html utilizada para negrito e qual outra é utilizada para itálico, e descreva abaixo a diferença entre elas.
Aula 5 - Resumo do Conteúdo Estudado
| Estrutura | Texto |
|
|
Aula 6 - Uso de Sublinhado e Tachado
- A tag para sublinhado é <ul> de underline, em inglês;
- A tag para tachado é <s> de strikethrough em inglês.
<p>
Atualmente, a internet é parte essencial da <u>vida moderna</u>. Ela conecta pessoas,
possibilita o comércio <s>virtual</s> eletrônico, redes sociais e o acesso rápido à informação.
</p>Uma utilização comum para o tachado são os sites de comércio eletrônico, onde o vendedor anuncia uma promoção de um produto, por exemplo:
<h1>Produto em promoção</h1>
<p>De <s>R$ 200,00</s> por R$ 180,00.</p>1) Assim como as tags <i> e <b> possuem tags semânticas, as tags <u> e <s> também possuem, coloque a tag semântica referente ao texto sublinhado e riscado e qual delas é recomendado utilizar?
Aula 7 - Tags de separação
<p>Primeira linha<br>Segunda linha<br>Terceira linha</p>O resultado dessa linha será:
Primeira linha
Segunda linha
Terceira linha
A outra tag é a <hr> do inglês horizontal rule (linha horizontal), que também como o próprio nome diz adiciona uma linha horizontal entre os textos:
<p>Primeiro Texto<p>
<hr>
<p>Segundo Texto<p>
<hr>
<p>Terceiro Texto</p>O resultado é uma linha horizontal entre os parágrafos, criando uma divisão entre um assunto e outro.
Qual a diferença na composição das tags de separação, que vimos agora, e as tags de texto? Onde elas se diferenciam? Escreva abaixo:
Aula 8 - Atividade de HTML
Crie uma página HTML simples para uma loja fictícia (pode ser uma bicicletaria, livraria, padaria ou outro comércio de sua escolha). A página deve conter:
- Tags de Estrutura,
- Tags de Texto,
- Tags de Separação.
- A estrutura básica de uma página HTML,
- O uso de tags de texto para formatar conteúdo,
- O uso de tags de separação para organizar visualmente a página.
Aula 9 - Tags Semânticas
Porque é importante utilizar tags semânticas?
- Ajudam a organizar melhor o código, facilitando a leitura e manutenção
- Buscadores do Google utilizam esse tipo de tag para otimizar suas pesquisas.
- Leitores de tela entendem melhor o conteúdo da página.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Bicicletaria Pedal Forte</title>
</head>
<body>
<h1>Bicicletaria Pedal Forte</h1>
<p><i>Mais de 20 anos pedalando com você!</i></p>
<hr>
<h2>Serviços</h2>
<p>Oferecemos manutenção completa para sua bicicleta:<br>
- Troca de peças<br>
- Ajuste de marchas<br>
- Revisão geral
</p>
<hr>
<h2>Produtos</h2>
<p>Temos uma linha variada de bicicletas e acessórios:</p>
<p>
<b>Bicicletas:</b> Mountain Bike, Speed, Urbanas<br>
<b>Acessórios:</b> Capacetes, Luvas, Luzes
</p>
<hr>
<h2>Contato</h2>
<p>Endereço: Rua das Flores, 100 – São Paulo - SP<br>
Email: contato@pedalforte.com.br
</p>
<hr>
<p>2025 Bicicletaria Pedal Forte - Todos os direitos reservados.</p>
</body>
</html>Vamos separar o código acima em 3 partes: Cabeçalho, Parte Principal e Rodapé
Para o cabeçalho vamos usar a tag <header>:
<header>
<h1>Bicicletaria Pedal Forte</h1>
<p><i>Mais de 20 anos pedalando com você!</i></p>
<hr>
</header>Para a parte principal vamos usar a tag <main>:
<main>
<h2>Serviços</h2>
<p>Oferecemos manutenção completa para sua bicicleta:<br>
- Troca de peças<br>
- Ajuste de marchas<br>
- Revisão geral
</p>
<hr>
<h2>Produtos</h2>
<p>Temos uma linha variada de bicicletas e acessórios:</p>
<p>
<b>Bicicletas:</b> Mountain Bike, Speed, Urbanas<br>
<b>Acessórios:</b> Capacetes, Luvas, Luzes
</p>
<hr>
</main>
E para o rodapé a tag <footer>:
<footer>
<h2>Contato</h2>
<p>Endereço: Rua das Flores, 100 – São Paulo - SP<br>
Email: contato@pedalforte.com.br
</p>
<hr>
<p>2025 Bicicletaria Pedal Forte - Todos os direitos reservados.</p>
</footer>Aqui mostramos o exemplo de 3 tags semânticas: <header>, <main> e <footer>, mas existem outras tags semânticas que iremos aprender e utilizar durante esse curso.
Adicione as 3 tags semânticas no código criado na aula anterior, abra no navegador e observe se houve alguma alteração visualmente, comente aqui suas observações:
Aula 10 - Utilizando tabelas
<table>
</table>Agora que temos a tabela definida pelas tags acima, precisamos que a nossa tabela tenha linhas e colunas. Para adicionar linha usamos a tag <tr> que significa Table Row (linha de tabela).
No nosso exemplo vamos precisar de duas linhas para começar, na primeira linha iremos usar para os títulos de cada uma da células da planilha, na segunda linha vamos usar para mostrar os dados.
<table>
<tr></tr>
<tr></tr>
</table>Temos agora uma tabela com duas linhas onde vamos adicionar as tags:
- célula de cabeçalho da tabela <th> que significa table header e
- célula de dados da tabela <td> que significa table data.
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
Com base no conteúdo que foi mostrado, crie uma tabela com:
- 4 células de cabeçalho e
- 3 linha de dados.
Aula 11 - Nossa Página na WEB
Aula 12 - Adicionando imagens
- Não possui a tag de fechamento;
- Não possui conteúdo interno e
- Tudo o que é necessário para mostrar uma imagem é encontrado nos atributos internos.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Bicicletaria Pedal Forte</title>
</head>
<body>
<header>
<h1>Bicicletaria Pedal Forte</h1>
<p><i>Mais de 20 anos pedalando com você!</i></p>
<hr>
</header>
<main>
<h2>Serviços</h2>
<p>Oferecemos manutenção completa para sua bicicleta:<br>
- Troca de peças<br>
- Ajuste de marchas<br>
- Revisão geral
</p>
<hr>
<h2>Produtos</h2>
<p>Temos uma linha variada de bicicletas e acessórios:</p>
<p>
<b>Bicicletas:</b> Mountain Bike, Speed, Urbanas<br>
<b>Acessórios:</b> Capacetes, Luvas, Luzes
</p>
<hr>
</main>
<footer>
<h2>Contato</h2>
<p>Endereço: Rua das Flores, 100 – São Paulo - SP<br>
Email: contato@pedalforte.com.br
</p>
<hr>
<p>2025 Bicicletaria Pedal Forte - Todos os direitos reservados.</p>
</footer>
</body>
</html>No trecho abaixo do código temos a inserção da tag de imagem:
<header>
<img src='bicicletaria.jpeg'>
<h1>Bicicletaria Pedal Forte</h1>
<p><i>Mais de 20 anos pedalando com você!</i></p>
<hr>
</header>Ao inserir uma imagem, no estilo de um banner com as medidas aproximadas de 1200x300px, vamos ter algo parecido com a imagem abaixo:
Note que já começamos a ter uma identidade visual para a nossa página.
...
<img src='bicicletaria.jpeg' alt='Uma bicicleta no estilo mountain bike'>
...Para controlar o tamanho da imagem são utilizados dois atributos:
- Width : Define a largura da imagem.
- Height : Define a altura da imagem.
- px (um valor fixo definido em pixel),
- % (um valor relativo definido em um percentual) e
- auto ( um valor definido pelo navegador).
- Quando é informada apenas um dos atributos, width ou height, o navegador ajusta o tamanho da imagem automaticamente, evitando que aconteça distorções na imagem.
- Quando são informados os dois atributos, tanto width quanto height, o navegador reserva a parte da imagem, evitando que ocorram "saltos" no layout.
...
<img src='bicicletaria.jpeg' width='1200px' height='300px' title='Clique para Continuar' alt='Uma bicicleta no estilo mountain bike'>
...Aqui temos um código para inserir a imagem com os atributos mais utilizados no momento.
Comente abaixo caso tenha alguma dúvida ou precise de ajuda em algum ponto dessa aula.
Aula 13 - Listas
<h2>Serviços</h2>
<p>Oferecemos manutenção completa para sua bicicleta:<br>
- Troca de peças<br>
- Ajuste de marchas<br>
- Revisão geral
</p>Veja que nesse código são apresentados os serviços que a loja realiza e podemos substituir essa parte do código, retirando as tags de separação e utilizar outras que representam listas.
Temos dois tipos de listas:
- Listas Ordenadas
- Lista Não Ordenadas
Significa: unordered list.
Usamos quando a ordem dos itens não importa.
Por padrão os itens aparecem com marcadores (bolinha pretas).
<h2>Serviços</h2>
<p>Oferecemos manutenção completa para sua bicicleta:</p>
<ul>
<li>Troca de peças</li>
<li>Ajuste de marchas</li>
<li>Revisão geral</li>
</ul>
Temos agora o resultado conforme a imagem abaixo, onde estamos utilizando uma lista não ordenada.
