Introdução ao Desenvolvimento Web

O mundo do desenvolvimento web está em constante expansão!

Neste mundo crescente tem espaço para todos!
Para você que deseja adentrar no caminho para se tornar um desenvolvedor, temos alguns concelhos para te ajudar na sua jornada.

HTML é a sigla para HyperText Markup Language, que em português significa Linguagem de Marcação de Hipertexto. É uma linguagem de marcação usada para estruturar e apresentar o conteúdo de uma página da web. Basicamente, o HTML permite que você crie a estrutura e o layout de uma página da web, definindo diferentes elementos e sua organização hierárquica. Esses elementos podem incluir títulos, parágrafos, imagens, links, tabelas, formulários e muito mais.

Nós somos um grupo de alunos do curso de ciências da computação na unifagoc, criamos um programa básico para você que quer dar o passo inicial
Veja um pouco sobre o que vamos estudar juntos:

  1. Estruturação do HTML
  2. Como manipular arquivos
  3. Apresentação da viewport
  4. Avançando com as tags básicas
  5. Nosso primeiro HTML

Esta é apenas a porta de abertura, nesse primeiro momento vamos mostrar apenas o HTML básico, se tiver maior curiosidade temos algumas fontes para recomendar:

Gostaria de um direcionamento melhor através do nosso site? Acesse: nossa live sobre HTML

O que é Web?
A Web, abreviação de World Wide Web, é um sistema de informação global que permite o compartilhamento de documentos e recursos por meio da internet. Ela foi concebida por Tim Berners-Lee no final da década de 1980 e se tornou amplamente acessível ao público em geral no início da década de 1990. Em 1989, Tim Berners-Lee, um cientista da computação britânico, propôs um sistema de hipertexto que permitiria a conexão de documentos através de links. Ele desenvolveu as tecnologias fundamentais para a Web, incluindo a linguagem de marcação HTML (Hypertext Markup Language), o protocolo HTTP (Hypertext Transfer Protocol) e o primeiro navegador web chamado WorldWideWeb. Essas tecnologias permitiram que documentos fossem interligados e acessados de forma intuitiva pelos usuários. Em 1991, a primeira versão pública da Web foi lançada, e a popularidade da nova tecnologia cresceu rapidamente. As pessoas começaram a criar sites e compartilhar informações, levando ao rápido crescimento da quantidade de conteúdo disponível online.

Para contextualizarmos:
Ao contrário do que muitos pensam, HTML não é uma linguagem de programação, e sim uma linguagem de marcação.


Qual a principal diferença entre os dois tipos de linguagem?

A linguagem de marcação é usada para a apresentação de informações, enquanto a linguagem de programação
é utilizada para o fornecimento de instruções, execuções e tarefas específicas a um computador.

Capítulo 1- Estruturação do HTML

A forma como temos possibilidade de dar instruções ao nosso HTML é através das chamadas tags.
As tags HTML são divididas em dois tipos: as que precisam de fechamento e as que não precisam de fechamento.
As tags que precisam de fechamento possuem a sintaxe <tag> </tag>, já as que não precisam de fechamento possuem como estrutura <tag/>.

Veja alguns exemplos de tags em HTML:

A estrutura básica de um documento HTML é:

  • <!DOCTYPE>
  • <HTML>
  • <head>
  • <meta/>
  • <title>
  • <title/>
  • <head/>
  • <body>
  • <body/>
  • <HTML/>

Observe bem as tags HTML, head, title e body, são tags que necessitam de fechamento.

Vamos entender cada uma dessas tags e sua função:

<!DOCTYPE>
A tag !DOCTYPE informa ao navegador a versão do HTML que está sendo utilizada no documento.
Por exemplo: no HTML5, basta incluir !DOCTYPE HTML, e assim o navegador já saberá que se trata de um documento na versão HTML5.
<HTML>
Esta tag é o elemento básico da estrutura do HTML. Assim sendo, ela conterá todos os elementos do seu documento.
Todo documento HTML deve iniciar e finalizar com essa tag.
<head>
Essa tag delimita o cabeçalho do documento.
Não possui nenhum valor visível, porém é capaz de transmitir ao navegador diversas informações muito úteis e essenciais
a uma boa apresentação do seu documento HTML. É dentro do head que fazemos referências a outros documentos como CSS e JavaScript
<meta/>
define qualquer informação de metadados que não podem ser definidos por outros elementos HTML.
<title>
Serve para definir o título de sua página.
Portanto, é aqui que se define o título que é mostrado na guia do navegador.
<body>
Finalmente, a tag que representa o corpo do documento. Em síntese, é nessa tag que todos os elementos visíveis do seu site devem ser inseridos.

Existem diferentes maneiras de usarmos as tags HTML, elas podem ser em bloco ou em linha.
Tags em bloco são usadas para adicionarmos mais de uma linha de informação/instrução na mesma tag, as tags em linha são usadas em apenas uma linha.

Além disso, uma mesma tag pode receber um ou mais atributos, que possuirá um valor que modifica sua estrutura ou funcionalidade.
Apresentando alguns atributos, futuramente veremos sua aplicação prática! Vejamos:

  • class="" que tem a função de definir uma "etiqueta" para várias tags.
  • id="" que tem a função de definir uma "etiqueta" para uma tag.
  • style="" usado para definir propriedades CSS diretamente na tag específica.
  • lang="" usado para determinar a linguagem padrão da sua página HTML.
  • title="" usado para definir um título podendo ser aplicado em um link por exemplo.
  • alt="" chamado de alternativo, algo que será impresso na tela caso alguma tag apresente mal funcionamento.
  • hidden="" um exemplo de uso deste atributo é que ele pode ser usado para esconder elementos de página que não podem ser usados até que o processo de login seja completo.
  • align="" define o alinhamento de um elemento ou de um bloco na página HTML.
  • width="" define largura.
  • height="" define altura.

Afim de se obter um melhor entendimento sobre alguns atributos que foram apresentados, seguiremos ocm alguns exemplos.
Observe abaixo uma aplicação de um atributo bastante usado, o atributo class:

<article class ="nome da classe">

Como foi dito anteriormente, o atributo class é usado para definir uma espécie de etiqueta para um ou mais tags do HTML
que podem ser citadas no CSS que veremos futuramente. Assim pode-se definir várias instruções para várias tags de uma só vez!

Outros exemplos é o atributo align, que serve para definir o alinhamento de um elemento na página:

<h2 <style= "align: center;" >>

Uma parte importante para a estrutura da sua página HTML é a semântica, ela ajuda a definir corretamente as instruções especificas para cada bloco da sua página HTML
além de ajudar a estilizar com o CSS sendo que algumas tags semânticas já possuem definições padrões prórpias para determinados objetivos.

Conhecendo as tags semânticas:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <div>
  • <aside>
  • <footer>
header
Gera um cabeçalho
nav
Gera um epaço que facilita identifica-lo como menu de navegação
section
Usado como separador de áreas dentro da página HTML
article
Tem a mesma função da section, ambos são usados para organização
div
Define uma separação de área como section ou article, porem não possui semântica
aside
Uma forma fácil de identificar o que será a sua "side bar"
footer
Define um rodapé para a sua página

Quais das tags a seguir são usadas na estrutura básica do HTML?

a)
b)
c)
d)

Capítulo 2- Como manipular arquivos

A manipulação dos arquivos em é uma parte muito importante para a construção da sua página web, sem a manipulação correta dos aquivos a dificuldade de manutenção, entendimento e organização da sua página ficará comprometida. Imagine a seguinte situação: Você possui um documento HTML e o dividiu em 16 páginas, é necessário referênciar estas páginas para que possa existir navegabilidade. E quanto a estilização? você não vai querer desenvolver 16 documentos CSS um para cada página, basta fazer um único e referência-lo ao seu documento HTML

Dito isso, vamos ver agora como fazer essa referência a alguns arquivos no seu documento HTML!

Como ter mais de uma página no seu site?

A forma como usamos para fazer referências a outros documentos é através de sua URL
(Uniform Resource Locator, ou traduzido para o português, Localizador Uniforme de Recursos.)
usando a tag <a> e o atributo href="" que juntos geram um hyperlink direcionado para a URL contida dentro do href="".
(a tag <a> é a responsável por gerar um hyperlink) por exemplo:
A referência a uma imagem se deseja ser exibida no corpo de seu documento HTML é feita de uma forma diferente devido a existir uma tag
para as imagens, a tag <img> possui o atributo src="" que tem a mesma função do href="" na tag <a>.
Veja um exemplo:

<img src ="../pasta/nome_arquivo.extensão" alt ="informação" >

obs: o atributo alt="" é usado para passar uma informação no lugar da imagem caso o carregamento da mesma falhe.

Vejamos mais alguns detalhes, as referências através das URL's tem um formato de acordo com o local da página
Um exemplo que pode ser usado para entender bem o que isso quer dizer é a diferença entre as seguintes situações:

  1. Um documento salvo na mesma pasta que o seu index
  2. Um documento salvo em uma pasta diferente da mesma pasta que seu index

obs: index é a forma como geralmente é nomeado o arquivo do seu documento HTML.
E o que isso interfere no momento de preencher a nossa URL?
URL's que são salvos na mesma pasta que seu index podem ser referênciados usando apenas a partir de seu nome e extensão.
exemplo:

nome_arquivo.extensão

Que não estão salvos no mesmo local que o index devem fazer as demais referências da URl.
exemplo:

../pasta/nome_arquivo.extensão

a tag de hyperlink também possui outros atributos, entre eles o atributo target="" com o valor _blank

<a target ="_blank">

Isso faz com que o seu link seja aberto em uma nova guia do navegador.

E se eu desejar referênciar um documento CSS?

Diferente de hyperlinks os documentos CSS são citados usando a tag <link> dentro do nosso head na estrutura do HTML.
Veja um exemplo:

<style rel ="stylesheet" href ="../pasta/nome_arquivo.css" >

obs: .css é apenas a extensão do arquivo que é usado na tag style para referências nosso documento de estilização.
O atributo rel é utilizado para falar qual é a categoria do arquivo que estamos linkando, por isso passamos o valor stylesheet
para o atributo rel quando estamos linkando uma forma de estilo no atributo href.

-- imagem de um exemplo de citação do documento CSS --
É usando os hyperlinks que é possível gerar a navegabilidade no seu documento HTML, eles podem ser aplicados dentro de várias outras tags
como listas, imagens e demais tags do HTML.

E quanto ao documento JavaScript?

Também é referênciado dentro da tag head no cabeçalho do nosso documento HTML através da tag <script> com o atributo scr=""
onde a pasta do nosso documento JavaScript sera referênciado no atributo src="". A extenção de um documento JavaScript é o .js
exemplo:

<head>
<script src ="nome_JavaScript.js" > </script>
</head>

Qual desses meios de manipulação de arquivos está INCORRETO?

a)
b)
c)
d)

Capítulo 3- Apresentação da viewport

A janela de visualização varia de acordo com o dispositivo e será menor em um telefone celular do que em uma tela de computador.
Antes dos tablets e celulares, as páginas da web eram projetadas apenas para telas de computador, e era comum que as páginas da web
tivessem um design estático e um tamanho fixo. Então, quando começamos a navegar na Internet usando tablets e telefones celulares,
as páginas da Web de tamanho fixo eram muito grandes para caber na janela de visualização. Para corrigir isso, os navegadores
nesses dispositivos reduziram toda a página da Web para caber na tela.
Isso não foi perfeito! Mas uma solução rápida.

O HTML5 introduziu um método para permitir que os web designers assumam o controle da janela de visualização por meio da <meta> tag.
A viewport é a área visível do usuário de uma página da web, tudo aquilo que o usuário enxerga no corpo do seu documento HTML.
Você deve incluir o seguinte <meta> elemento viewport em todas as suas páginas da web:

< meta name="viewport" content ="width=device-width, initial-scale=1.0">

Isso fornece ao navegador instruções sobre como controlar as dimensões e o dimensionamento da página.

A width=device-widthparte define a largura da página para seguir a largura da tela do dispositivo (que varia dependendo do dispositivo).

A initial-scale=1.0parte define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.

Abaixo segue um exemplo de como ficaria sua página com a viewport ou sem a viewport:

Comparativo sem e com metatag da viewport

Analise as afirmativas:
I- A viewport refere-se à área visível do conteúdo de uma página da web em um dispositivo.
II- Podemos controlar as dimensões da viewport com a tag <meta>.
III- A viewport não pode variar de acordo com o tamanho do dispositivo (celulares, tablets ou computadores).

São verdadeira(s) a(s) alternativas:

a)
b)
c)
d)

Capítulo 4- Avançando com as tags basicas

Chegou a hora de apresentar mais algumas tags para agregar mais algum conhecimento, neste capítulo vamos aprender as tags:

  1. form
  2. label
  3. input
  4. tipos de input
  5. button
<form>
Essa tag gera uma área reconhecida como um formulário
<label>
Essa tag serve como titulo para ser informado qual informação está sendo requerida em determinado input
<input>
É a tag de preenchimento do formulário
<button>
Essa tag não possui função prévia, se for clicada não executa nenhuma instrução, mas é usada para programar o JavaScript e aplicar o código na página HTML

A tag <form>

A tag form possui diversos atributos, dentre eles temos o atributo action="" e o atributo method=""
O atributo action="":
É neste atributo que devemos informar o nome da URL para a qual o conteúdo do formulário será submetido, se este atributo não for especificado, a URL corrente será usada.
o atributo method="":
Neste atributo informamos o tipo de envio que os dados deste formulário terão, eles podem ser get ou post

Qual a diferença entre get e post?

A diferença é muito grande, com formulários trabalhamos com dados do usuário então é muito importante saber como manipular esses dados.
O envio é uma parte senão a mais importante da manipulação dos dados do usuário, e não queremos ser descuidados.
Explicando melhor sobre get e post, os dados do formulário podem ser enviados
como variáveis de URL (com method="get") ou como pós-transação HTTP (com method="post").
Informações importantes sobre o GET

  • Anexa dados de formulário ao URL em pares de nome/valor
  • O comprimento de um URL é limitado (cerca de 3.000 caracteres)
  • Nunca use GET para enviar dados confidenciais! (será visível no URL)
  • Útil para envios de formulários em que um usuário deseja marcar o resultado como favorito
  • GET é melhor para dados não seguros, como strings de consulta no Google

Informações importantes sobre o POST

  • Anexa dados de formulário dentro do corpo da solicitação HTTP (os dados não são mostrados na URL)
  • Não tem limitações de tamanho
  • Os envios de formulário com POST não podem ser marcados

A tag <label>

O label nada mais é do que uma mensagem passada ao usuário para informar qual informação é solicitada dentro de um determinado input. O atributo do label é o for=" ", sua função é vincular o label com um input através da id=" " do input, se a id do input for inserida no for do label, será vinculado.
Veja o exemplo:

<label for ="id_input" >
<input id ="id_input" >

A tag <input>

O input é responsável por gerar um campo em que o usuário poderá informar os dados solicitados, geralmente acompanhado por três atributos:

  • type= " "
  • name= " "
  • id= " "
type= " "
Seu valor define o tipo do input (falaremos melhor sobre o type no próximo tópico).
name= " "
Seu valor informa no local do envio como o dado será enviado, se for enviado para um banco de dados, a coluna inserida no name= " " armazenará o valor informado no input
id= " "
Já vimos sobre a função da id= " ", para relembramos, ela serve como uma identificação, uma etiqueta, que referência apenas uma tag.

exemplo da sintaxe da tag <input>:

<input type ="text" name ="receber_em" id ="etiqueta" >

Tipos de input

O tipo do input influência no comportamento do campo, o atributo type="" possui diversos valores, cada um deles com um comportamento diferente.
Vamos citar alguns:

  • text
  • number
  • password
  • email
text
Tudo que for inserido no campo deste input será idenficado como texto.
number
Esse tipo identifica números, o seu comportamento também é restritivo, só é possível ser preenchido com números
password
Esse tipo não define restrições, ele oculta o que é escrito tendo a opção de reexibir o seu conteúdo já digitado.
email
Esse campo faz uma validação automaticamente com a finalidade de confirmar o formato digitado se é compativél com o formato de um email.

Experimente usar alguns dos inputs definidos abaixo:





textarea É um campo usado geralmente para o usuário escrever uma mensagem e também é idenficado como texto.
O textarea possui uma tag própria, ele não é um type do input.

<textarea name ="receber_em" cols 30 rows 20>

cols e rows são para definir um limite do campo.>

Quais são os principais tipos de inputs?

a)
b)
c)
d)

Capítulo 5- Nosso primeiro HTML

Chegamos ao último capítulo desta página!
Agora vamos colocar em prática tudo aquilo que aprendemos, mas antes, permita-me mostrar a vocês uma plataforma completa para o uso dos desenvolvedores, o Visual Studio Code!
As funcionalidades do VS Code, como é popularmente chamada a plataforma, vão muito além de apenas desenvolvimento web, é possível adicionar diversas extenções de arquivos
permitindo trabalhar com várias linguagens para cumprir diversas tarefas!

Interface do VS Code

Vamos ver um passo a passo para você criar sua primeira página HTML começando da instalação e configuração do Vs Code.

Acesse o link abaixo para fazer o download do arquivo de instalação do VS Code.
Download do VS Code!
Fonte: https://code.visualstudio.com/
Após baixar o arquivo de download, execute o arquivo do instalador e siga os passos :

  1. Marque todas as caixas como a imagem mostra:

    Somente isto já conclui a instalação!
  2. Após instalado, abra seu VS Code e crie uma nova pasta onde será salvo o seu documento HTML.
    Para começar uma página HTML, primeiro temos que criar um novo arquivo dentro da pasta nomeado como: index.html .
    Depos de criada esta pasta, siga as opções conforme as imagens mostram para abri sua pasta:
    Passo 1 -

    Passo 2 -

  3. Após abrir seu arquivo, uma mensagem ira surgir:

    Clique em “sim, confio nos autores” porque esta é uma pasta que nós mesmos estamos criando.
  4. Na parte superior esquerda passando o mouse vão aparecer algumas opções de ícones como mostra a imagem abaixo.

    Clique no ícone indicado para ter acesso a barra de fórmulas.
  5. Crie seu arquivo com nome e extenção como no exemplo abaixo:
  6. Agora se quiser adicionar uma extenção é simples, basta pressionar (Ctrl + Shift + X) que será aberta a aré para baixar uma extenção!

    Faça um teste com a extenção: Portuguese (Brazil) Language Pack for Visual Studio code.

Agora podemos enfim propor alguns exercícios. Para colocar em prática o que aprendemos, desafiamos você a desenvolver algumas páginas HTML.

Proposta 1 – Página Hello World!

Desenvolva uma página simples para imprimir na tela o texto “Hello, World!” (ou Olá Mundo, em português).
O objetivo dessa proposta é tornar mais familiar a sintaxe básica do HTML.

Proposta 2 – Blog

Nessa proposta, iremos desenvolver um Blog. Crie uma página HTML com textos mais longos, com diferentes tamanhos e formatações.
Adicione também imagens ou links para websites da sua preferência.

Proposta 3 – Protótipo de Site de Empresa

Desenvolva uma página HTML para uma empresa que você imaginar. Ele deve conter informações, imagens e links para produtos ou serviços.


Analise os códigos HTML abaixo e identifique o código incorreto:

a)
b)
c)
d)