Introdução ao Desenvolvimento de Páginas HTML

Hoje a gente vai entender como é que funcionam os sites da internet. E mais que isso: a gente
vai começar a entender como é que funciona a linguagem, como é que a gente programa
para internet.
Primeiramente a gente precisa entender como é que funciona o site. O site nada mais é do
que um conjunto de páginas web, páginas HTML, que são exibidas, processadas pelos nossos
navegadores, como o Chrome, Firefox, Internet Explorer, e então exibidas para os usuários.
Como é que funciona um site? Primeiramente quando a gente precisa acessar esse site, o
nosso computador, onde a gente está com o navegador aberto, faz uma requisição.
Ou seja, a gente digita, por exemplo: w w w nome do site, faz o envio dessa requisição para o
servidor, o servidor processa essa solicitação, às vezes é necessário consultar um banco de
dados, para ver se o usuário pode ou não acessar esse sistema, posso também capturar vídeos
e imagens para exibição de um determinado conteúdo, posso até mesmo fazer o envio de um
e-mail. Então o servidor precisa processar esses dados para então montar a resposta e devolver
para o computador.
Essa resposta nada mais é do que uma página HTML.
Ele devolve então para o computador do usuário um conjunto de TAGs de codificação que vai
ser interpretada e apresentada pelo navegador. Como é que a gente faz para programar
para Internet?
Existem diversas linguagens de programação para a construção de um site na internet. A gente
tem dois tipos de linguagens: as linguagens de cliente, que são as linguagens que são
responsáveis pela apresentação do conteúdo da página HTML.
O próprio HTML, que mostra o texto, a imagem, ou seja, ele faz a marcação dos dados na
página.
O CSS que é responsável pela estilização, por deixar o site bonito, por deixar o site todo com
uma padronização de cores e fontes, ou seja, os estilos. E o JavaScript, que faz a interação da
página. Por exemplo, vocês já devem ter visto quando uma imagem é trocada, dá um efeito
de uma imagem a ser exibida e logo exibe uma segunda imagem, ou até mesmo quando
vocês preenchem algum formulário e às vezes esquecem de preencher algum dos campos; o
JavaScript que faz essa detecção de campos não preenchidos, de fazer algumas interações
na página.
Essas linguagens são linguagens do cliente porque elas são executadas diretamente no
navegador, por isso que de vez em quando vocês podem perceber que um site em um
navegador funciona de um jeito, e em outro navegador ele abre com alguma cor ou com
alguma apresentação diferente.
Da mesma forma que se o site é aberto no celular ou em um tablet, vai ser completamente
diferente de um site aberto no computador, onde eu tenho uma tela muito maior. Já as
linguagens de servidor são linguagens que ficam lá no servidor, na empresa onde a gente faz a
hospedagem desse site e são linguagens que são capazes de fazer coisas um pouco mais
elaboradas.
Por exemplo, conectar-se com banco de dados, fazer a recepção de arquivos, então por
exemplo, quando vocês estão no Facebook e querem mandar alguma imagem ou alguma
foto para o álbum de fotos, essas linguagens do servidor são responsáveis por receber essas
imagens, armazenar na máquina (servidor) e até mesmo fazer o envio de e-mail, guardar a
informação.
Então são linguagens mais sofisticadas porque fazem outro tipo de trabalho de processamento,
diferente da linguagem do cliente, que vai fazer a apresentação dos dados.
Por serem linguagens de servidor, cada servidor ou cada instalação pode executar uma
linguagem específica, como PHP, ASP, JSP, e essas linguagens são únicas, então não depende
do meu navegador, não depende se eu estiver acessando um celular ou tablet, elas sempre
vão funcionar pois elas estão diretamente no servidor, lá na hospedagem do site.
Então vamos olhar um pouco mais internamente, como é que são essas linguagens: a gente
tem aqui em cima alguns dos serviços que ocorrem nessas linguagens de servidor, por exemplo:
a linguagem de PHP permite que a gente trabalhe com arquivos, então posso ter arquivos
textos onde eu vou armazenar informações, ou arquivos XML.
Posso também, através de linguagens como PHP, enviar mensagens de e-mails e acessar base
de dados. Essa linguagem PHP fica lá dentro do servidor, então ela vai processar. Mas o servidor
só devolve para o nosso cliente as linguagens HTML, CSS, JavaScript, ou seja, são linguagens
que vão apresentar o conteúdo para o nosso cliente. Vamos conhecer um pouquinho mais
como é que é a História, a Linha do Tempo da linguagem de programação para internet.
Então lá no ano de 1991 surgiu a linguagem HTML, essa linguagem de marcação onde a gente
define como o conteúdo de um site será exibido. Logo em seguida, no ano de 94, surgiu a
HTML 2, com mais alguns recursos. Somente no ano de 96 que surgiu o CSS para fazer a
padronização dos sites e as primeiras interações com JavaScript.
Já a partir de 97, principalmente com a popularização da internet, e aqui no Brasil as pessoas
começaram a ter mais acesso a internet ainda na época da internet discada, veio então o
HTML 4, que realmente bombou e começou a ser muito utilizado para a construção das
páginas. Em 98 surgiu o CSS 2 com algumas funcionalidades, alguns recursos mais avançados.
Já no ano 2000 pode ser feito um pouco mais de criatividade a partir do XHTML, mas a grande
mudança ocorreu a partir dos anos 2000, onde as informações e a parte de apresentação das
páginas deixou de ser utilizada com frames, com tabelas, e a gente conseguiu organizar essas
informações através de divisões. Então a gente teve essa mudança do Tableless Web Design,
onde a gente monta o conteúdo de uma forma muito mais bonita, melhor apresentado.
Também muita interatividade, exigindo menor carregamento da página através de
componentes AJAX, e mais recentemente no ano de 2009 surgiu então o início da
documentação do HTML 5.
Mas para que serve o HTML? Ele é o responsável para que a informação que está lá no servidor
seja apresentada de uma forma compreensível por qualquer pessoa.
Imagine que o código vem e se não estivesse interpretado seria como esse código aqui no
lado direito da tela, notem que são várias TAGs, comandos, que para algumas pessoas,
quando a gente não conhece a linguagem HTML, são incompreensíveis. Mas são esses
comandos aqui entre os símbolos de maior e menor que possibilitam, que são interpretados
pelo navegador, então são mostrados de uma forma mais bonita, apresentado com fontes,
com cores, com estilos que agradam muito mais os nossos olhos.
Então essa linguagem aqui, essas marcações que a gente vê na parte direita, são
interpretadas pelo navegador para serem apresentadas de uma forma visual, bonita e
atraente. Por onde que a gente começa quando vai programar para internet? A gente precisa
de dois elementos, primeiro um navegador, para a gente poder visualizar as páginas que a
gente está construindo, e segundo um bloco de notas.
Que navegador que eu poderia escolher? Vocês podem escolher qualquer um deles: pode ser
o Opera, pode ser o Safari, o Chrome, o Firefox, o Internet Explorer. Mas, quando a gente vai
desenvolver para a internet, a gente tem que pensar que os navegadores são diferentes, foram
produzidos por pessoas diferentes, logo a nossa apresentação ou a página que vai ser exibida
também pode diferenciar de um navegador para o outro.
Hoje em dia com os recursos de HTML 5 e CSS 3, vocês vão perceber que nem tudo que a
gente escreve no código, funciona. Então qual é a minha dica: sempre ter mais que um
navegador instalado no computador de vocês, para que seja possível essa comparação e ver
se os comandos estão funcionando. Os navegadores eu acredito que vocês já tenham, se não
vocês não teriam como acessar esse curso e visualizado esse vídeo, então vocês já tem algum
navegador. Se vocês só têm um, aproveitem e instalem outros, conheçam as novas
funcionalidades, mantenham ele sempre atualizado para ver como funcionam os comandos
novos, principalmente.
Também vocês vão precisar, para construir as páginas HTML, Blocos de Notas. Então vocês
podem utilizar desde o bloco de notas mais simples, o Notepad dos nossos computadores, não
tem problema, ele já vem na máquina de vocês e vocês podem utilizar e vai funcionar, ou se
não vocês podem instalar blocos de notas mais sofisticados, que vão deixar os códigos de
vocês com cores diferentes, vai ficar mais fácil de visualizar abertura e fechamento de cada
um dos comandos.
Existem dois blocos de notas bem famosos: o Notepad++ e o Sublime Text. Os dois são gratuitos,
vocês estão vendo os endereços e podem baixar que não tem problema algum, funcionam
super bem. Aí vai da escolha de vocês: se vocês gostam mais do estilo do Notepad ou do
Sublime, os dois são muito bons. Vocês também podem utilizar alguns editores gráficos, que
facilitam muito a visualização rápida do que vocês estão programando.
Existe o DreamWeaver, que é muito famoso no seu desenvolvimento para construção de
layouts, e também tem o TinyMCE.
Particularmente, eu acho que para quem está começando essas ferramentas às vezes trazem
códigos que são incompreensíveis, se eu pudesse sugerir para vocês, fiquem com o SublimeText
ou com o Notepad++ para o início, para vocês verem realmente e deixar o código bem limpo
e fácil de entender, e se depois do curso vocês estiverem mais preparados, gostarem e querem
buscar novos desafios, podem instalar essas duas ferramentas, mas tendo em vista que elas tem
alguns códigos mais complexos e aí vocês já vão ter que dominar um pouco mais a linguagem
para entender.
Então esperem um pouquinho antes de começar a utilizar esses editores gráficos.
Primeiros passos

Nesse vídeo a gente vai começar a compreender como é que se programa uma página HTML.
Mas antes de tudo vamos cuidar de um detalhe: o HTML não é uma linguagem de
programação é uma linguagem de marcação, ou seja, a gente vai marcar os elementos,
textos, imagens e vídeos que a gente quer que sejam exibidos uma página Web.
Como a gente viu já anteriormente o HTML pode ser escrito em qualquer editor de texto como:
o bloco de notas do computador de vocês.
Só que tem um detalhe: todo arquivo que a gente for criar precisa ser salvo com uma extensão
específica que é o .html.
Feito isso vocês podem abrir o arquivo em qualquer navegador que ele vai funcionar.
Mas como é que a gente começa uma página HTML? Ela tem que ter alguns elementos
básicos na hora da sua criação.
O primeiro deles é essa tag aqui <html>.
Notem que toda página HTML é constituída de tags.
As tags são esses conjuntos aqui de códigos onde a gente coloca entre os sinais de menor e
maior especificando o que a gente quer que apareça na tela. Como dito, a tag <html> é a
primeira da página, ficando logo no início do arquivo e fechamos no final com </html>.
Dentro do html a gente tem dois elementos: o head que é o cabeçalho da página e o body
que é o corpo da página.
No head a gente, normalmente, coloca as informações para abertura, para o carregamento
da página, como: o tipo de decodificação, os arquivos complementares, como CSS e
JavaScript, e o próprio título da página.
A tag title é onde colocamos o título da página, ou seja, a informação que vai ficar lá em
cima na aba do navegador.
Ainda, posso colocar alguns elementos visuais, então tudo que eu quiser que a página exiba
como por exemplo: textos, imagens e vídeos eu vou colocar dentro dessa tag body.
Vamos ver como é que funciona na prática? Para começar o desenvolvimento da nossa
primeira página HTML e a gente vai abrir um bloco de notas, no caso vou utilizar o Notepad + +.
Para fazer a marcação da nossa página, vou abrir o Notepad ++ e vamos colocar os mesmos
elementos que tinha no código que a gente acabou de ver ali na apresentação:

<html>
<head>
<title> Título da Página </title>
</head>
<body></body>
</html>

Então primeiro abrimos a tag do HTML e já para evitar de esquecer o fechamento da tag eu
sempre sugiro que você abra e já feche logo em seguida.
A gente viu que tem dois elementos: primeiro o cabeçalho, então colocar as duas tags aqui do
cabeçalho e logo em seguida o corpo da página.
Dentro do cabeçalho a gente colocou o título da página que eu vou colocar aqui.
Vou escrever uma mensagem bem conhecida no mundo dos programadores: “Oi mundo” e
vou fechar a tag do título.
E vamos salvar esse nosso arquivo.
Lembre-se sempre de ter o cuidado de salvar o arquivo com a extensão .html. eu vou salvar na
minha área de trabalho mesmo.
E aí vocês vão notar que vai criar um ícone com a imagem do navegador.
Por padrão, as minhas páginas sempre abrem no Chrome mas vocês podem utilizar qualquer
navegador.
Se vocês quiserem testar em outros navegadores podem clicar com o botão direito do mouse e
vocês vão ver que existe a opção abrir com e vocês escolhem o navegador.
Eu vou abrir ele dentro do Chrome mesmo.
Então vou dar dois clicks e vocês vão ver que já apareceu lá em cima a mensagem “oi
mundo” que a gente acabou de programar.
Já deixei aberto a outra página, do Instituto Federal, para vocês verem que todas as páginas
da Internet estão feitas em HTML.
Então para vocês comprovarem isso vou clicar com o botão direito novamente aqui na página
e clicar na opção “exibir código fonte da página” onde vocês podem visualizar que a página
toda foi escrita em HTML.
Logo no início do código a gente consegue ver aquela tag abertura do HTML e logo em
seguida o cabeçalho e o título.
Se vocês quiserem fazer um teste, peguem uma página que vocês gostem.
Voltando para a nossa página, até agora a gente só colocou o título.
Lembra que eu comentei com vocês que é possível fazer a página mostrar algum determinado
conteúdo? Então vou voltar aqui para o meu bloco de notas e se a gente quiser colocar algum
texto, alguma informação dentro do corpo da página é só vir aqui na tag body e escrever
qualquer informação.
Eu vou colocar aqui “teste teste teste”, vou salvar o arquivo e volto ao navegador.
Apenas pressionando F5 ele já faz a atualização.
Se vocês preferirem, podem utilizar o botão de recarregar a página que também vai atualizar o
conteúdo.
Então vocês estão vendo que apenas com a informação aqui do título e do corpo a gente já
consegue escrever nossas primeiras páginas em html.
Layout
Hoje a gente vai estudar um pouco sobre os layouts no HTML 5.
Essa é uma funcionalidade nova mas o conceito, a teoria sobre o layout não é tão nova assim.
Para entender como é que funciona o layout vamos observar duas páginas bem conhecidas
do público brasileiro: o primeiro site que a gente vai analisar é o site da globo.com.
Se vocês observarem, a Globo utiliza alguns recursos para organizar o conteúdo dela: tem um
logotipo logo em cima no canto superior esquerdo onde a Globo coloca sua marca, logo ao
lado tem um recurso muito importante para quem vai utilizar o site que é a possibilidade de
localizar alguma notícia.
Ao lado vem a temperatura e, bem abaixo, já vem um menu com as informações sobre
notícias, esportes e entretenimento.
Na sequência vêm as notícias em si nos mais diversos setores. As notícias mais importantes ficam
em destaque, em tamanho maior, enquanto que outras ficam em tamanho menor.
No fim da página há informação sobre direitos autorais e privacidade. Essa parte final
chamamos de rodapé.
Outro site que é bem utilizado pelos brasileiros são os de bancos, então peguei o site da Caixa
como exemplo.
Se vocês observarem, alguns elementos são bem parecidos com os da globo.com.
O logotipo da caixa está localizado aqui no canto superior esquerdo da mesma forma que o
da Globo.
Na barra superior também há menus com as informações mais úteis, mais acessadas.
E também há a caixa de localização de informações específicas.
A Caixa tem ainda duas outras sessões: um menu lateral onde as pessoas podem localizar
informações sobre as loterias, programas sociais e podem fazer fácil acesso a algumas das
funcionalidades mais acessadas e no lado direito tem informações adicionais, alguns
destaques.
Então a gente percebe que a maioria dos sites possui essa forma de organização, muito similar,
onde logo no início se coloca o logotipo, a organização do menus pode ser na parte superior
ou lateral e o meio é destinado ao conteúdo.
No HTML 5 essa forma de organização dos elementos é chamada de layout.
Ao fazer uma busca no Google sobre HTML5 vocês podem perceber que já há vários layouts
pré-definidos para gente utilizar Por exemplo: uma página que contém o seu cabeçalho ou
rodapé, o navy que seria o menu, logo em seguida informações ou eu poderia organizar a
minha página somente com cabeçalho, menu na lateral ou um menu adicional na outra
lateral e o rodapé.
Posso escolher fazer menos informações, só o cabeçalho e o rodapé.
Enfim, a escolha de organização é flexível.
A com o HTML 5 a gente tem que fazer o uso dessas novas tags para determinar o que que
significa cada elemento da nossa página.
Vamos fazer um teste aqui voltando na página que a gente criou no outro vídeo.
A gente tem a página do “Oi mundo” onde a gente vai adicionar novos elementos.
Antes de adicionar os elementos vamos conhecer que elementos são esses.
Basicamente são quatro as tags mais utilizadas, as ditas obrigatórias para organizar esses
conteúdos.
São elas (todas elas incluídas na tag body): cabeçalho, menu de navegação, sessão e
rodapé.
O primeiro deles é o cabeçalho que a gente vai utilizar através da tag header.
Logo em seguida vem a tag nav para descrever o menu de navegação.
As sessões através da tag session e, então, o rodapé através da tag footer.
O cabeçalho, o menu e o rodapé a gente só tem um em cada uma das páginas.
Então a gente só vai ter um cabeçalho, uma parte de menu e um rodapé.
Mas as sessões vocês podem colocar várias, justamente como o globo.com fazia, onde eu
tenho a parte de entretenimento, de notícias ou de esportes.
Agora vamos colocar essas tags na nossa página de teste.
Voltando aqui com a nossa página, eu vou apagar essa parte teste pra gente continuar o
nosso o nosso exemplo.
Então dentro da tag body, o primeiro elemento que a gente vai adicionar é o header que vai
ser o nosso cabeçalho.
Aqui eu vou evitar de colocar acentos só para ficar mais fácil a visualização lá no navegador.
E logo em seguida do header a gente pode colocar o menu através da tag nav.
Na sequência a sessão e por fim o rodapé.
Colocamos os novos elementos, podemos salvar e visualizar como é que vai ficar lá no
navegador.
No navegador a gente tem ainda o exemplo anterior com as três repetições da palavra teste e
agora atualizando a página a gente já pode perceber os novos itens: o cabeçalho, o menu, a
sessão que ficou com a codificação um pouquinho diferente mas gente já vai ver isso nos
próximos vídeos e o rodapé.
Então notem que por mais que a gente tenha colocado as tags com os nomes definidos,
visualmente não vai fazer milagre nenhum.
Não é porque a gente colocou header que ela já vai aparecer um cabeçalho todo bonito,
estilizado, colorido.
Isso a gente vai fazer posteriormente com ajuda dos arquivos de estilização do CSS.
Logo, as tags só vão servir para dividir, para organizar a página de vocês.
A parte de estilo, cores, fontes vão ficar a cargo do CSS.
Como eu disse para vocês, podem ser colocadas várias sessões, então, vamos repetir a sessão,
vamos copiar e colocar novas sessões.
Podemos ter, por exemplo, a sessão “notícias”, “esportes” e a sessão “lazer”.
Agora nós temos três sessões e se atualizarmos um a nossa página vão aparecer as três.
Notem que não mudou nada, elas só ficaram uma embaixo da outra e o estilo mais uma vez
vai ficar lá com CSS.
1.4 Tags HTML
Clique aqui para versão em Libras

No link abaixo, você encontrará um documento PDF contendo uma lista de tags HTML. É
importante que você guarde esta lista para consulta sempre que necessário. Tenha ela em seus
materiais de estudo, seja no computador ou em folha impressa.

A lista está no idioma inglês. Utilize um dicionário ou tradutor para identificar as tags e colocar
uma breve explicação ao lado de cada uma que você ainda não conheça. Lembre-se de
não traduzir as tags, pois elas só podem ser escritas no formato original, na língua inglesa.

Site: https://websitesetup.org/HTML5-cheat-sheet.pdf