Desenvolvimento

Front-end
Thalia Santos de Santana
Ementa da disciplina
● Conteúdos:

Conceitos de uma estrutura cliente/servidor; HyperText Markup

Language (HTML), principais tags e criação de formulários; Folha
de estilo em cascata; Conceitos do funcionamento de uma
linguagem voltada para o desenvolvimento de aplicações web.

● Carga horária: 40h

www.ifgoiano.edu.br/ceres
Como funcionam aplicações web?

www.ifgoiano.edu.br/ceres
Como funcionam aplicações web?
● A função do usuário web é permitir fazer solicitações ao servidor,
exibindo o resultado do pedido;
● O navegador (browser) é o software que se comunica com o
servidor;
● Mas como? Protocolo HTTP - é o protocolo que os clientes e os
servidores usam para se comunicar;

www.ifgoiano.edu.br/ceres
Como funcionam aplicações web?
● Cliente-servidor
○ O HTTP usa um modelo de solicitações e respostas;
○ Uma solicitação ocorre quando o usuário faz uma solicitação
HTTP e o servidor web devolve uma resposta HTTP;
○ O navegador verifica como tratar esse conteúdo;
○ Se a resposta que vem do servidor for uma página HTML,
então é inserido na resposta HTTP.

www.ifgoiano.edu.br/ceres
HTML
● Hypertext Markup Language ou linguagem de
marcação de texto;
● Marcações de formatação e diagramação de
informações como textos, imagens, sons e
também possibilita a inclusão de hipertexto;
● Os hipertextos são referências que uma página
pode fazer para si mesma ou para outros
documentos.

www.ifgoiano.edu.br/ceres
HTML
● O padrão HTML foi desenvolvido pelo W3C ou
pelo World Wide Web Consortium em 1997;
● Permaneceu durante muito tempo na versão
4.01, datada de 24 de dezembro de 1999;
● No ano de 2014, foi lançado o HTML 5;
○ Trata-se de uma nova versão da linguagem
HTML, com novos elementos, atributos, e
comportamentos e um conjunto maior de
tecnologias para aplicações web.

www.ifgoiano.edu.br/ceres
O que eu crio com HTML?
● Ao visitar uma página simples na
web, você pode perceber que
existem diferentes distribuições e
tamanhos para títulos, parágrafos,
imagens, vídeos e qualquer outro
elemento;
● Essa estrutura é estabelecida
por meio do HTML.

www.ifgoiano.edu.br/ceres
Como funciona o HTML?
● Um documento HTML é um arquivo de texto comum que tem
como extensão .htm ou .html;
● Para que seja visualizado, basta que seja aberto em qualquer
navegador, pois trata-se de uma linguagem interpretada;
● Para criarmos uma página web, precisamos ter conhecimentos
básicos da linguagem HTML, de um editor de textos para gerar
os códigos-fonte, e um navegador (como Google Chrome). que
possa interpretar o código e visualizar as páginas.

www.ifgoiano.edu.br/ceres
Como funciona o HTML?
● O código é escrito em qualquer editor de texto;
● Alguns exemplos:
○ Bloco de notas (nativo do Windows);
○ Gedit (nativo do Linux);
○ Notepad++;
○ Atom;
○ E muito mais...

Note que para o Notepad++ e Atom é necessária instalação em sua máquina.

www.ifgoiano.edu.br/ceres
Como funciona o HTML?
● Geralmente um site é composto por
diversas páginas HTML:
○ Exemplo: um website que contenha
cinco páginas (uma homepage, uma
sobre a empresa, uma página de
produtos, serviços e contato)
receberá ao menos 5 documentos
.html distintos, sendo um para cada
página do website.

www.ifgoiano.edu.br/ceres
Minha primeira página
● A linguagem HTML possui seus comandos de feitos com tags
(etiquetas) que equivalem aos comandos de formatação;
● Uma tag, em HTML, não é mais do que marcas padrões utilizadas
para fazer as indicações necessárias ao navegador;
● Todo documento HTML apresenta as tags cercadas por um sinal
de menor (‘<’) e maior (‘>’);
● As tags definem toda a estrutura da página, tais como o seu
tamanho, a fonte da letra, as cores, as quebras de linha e etc.

www.ifgoiano.edu.br/ceres
Minha primeira página
● Um programa em HTML é dividido em três partes: a estrutura
principal, o cabeçalho e o corpo do documento.

Note que este exemplo é somente uma estrutura simbólica de cada parte.

www.ifgoiano.edu.br/ceres
Minha primeira página
● Note que o exemplo anterior pode ser convertido em código
executável como:

www.ifgoiano.edu.br/ceres
<HTML>
● A primeira tag de um documento HTML é <HTML>;
● É ela que informa ao navegador que teve início a partir daquele
ponto a página web, e sua correspondente </HTML> finalizando o
mesmo documento.

</html>
...
</html>

www.ifgoiano.edu.br/ceres
<HEAD>
● <HEAD>...</HEAD> indicam o cabeçalho do documento e contém
as informações de configuração da página;
● Entre as informações importantes está o título, que corresponde
às tags <TITLE>...</TITLE>, que será apresentado na janela do
navegador.
</html>
<head> <title> Minha página </title>
</head>
</html>

www.ifgoiano.edu.br/ceres
<BODY>
● <BODY>... </BODY> contém todo o conteúdo do site, que além de
textos, imagens, links, ainda suportam a inserção de outras tags;

</html>
<head> <title> Minha página </title>
</head>
<body>
Hello World!
</body>
</html>

www.ifgoiano.edu.br/ceres
Minha página
● Se o código anterior for executado, qual será o resultado???

www.ifgoiano.edu.br/ceres
Tags

Nome da Tag Função

<h1>,<h2>,<h3>,<h4>, Tags para definir um título e subtítulos, variando de 1 a 6, sendo h1 o

<h5 > e <h6></h6> título mais importante e h6 o de menor importância

<p></p> Tag para definir um parágrafo

<a></a> Tag de link, junto ao atributo href=“” é responsável pelos hiperlinks

<section></section> Tag que define uma seção

<div></div> Tag que define uma divisão

<footer></footer> Tag que define um rodapé

www.ifgoiano.edu.br/ceres
Tags

Nome da Tag Função

<nav></nav> Tag que define uma área de navegação (como menus)

<table></table> Tag para definir uma tabela

<ol></ol> Tag que define uma lista ordenada

<ul></ul> Tag que define uma lista não ordenada

<li></li> Tag que define um item da lista

<b></b> Tag que define formatação em negrito

www.ifgoiano.edu.br/ceres
Tags

Nome da Tag Função

<form></form> Tag que define um formulário

<input> Tag para definir os campos de um formulário

<textarea></textarea> Tag que define uma área para o usuário digitar um texto

<label></label> Tag que define uma legenda para o formulário e seus campos

<header></header> Tag que define um cabeçalho (para este caso vem dentro do <body>)

<i></i> Tag que define formatação em itálico

www.ifgoiano.edu.br/ceres
Tags

www.ifgoiano.edu.br/ceres
Vamos para a prática...
O doctype é utilizado na versão 5 e deve ser usado sempre no início da página!

www.ifgoiano.edu.br/ceres
Resultado
O meta charset UFT-8 faz os acentos
estarem na codificação correta

Uso da Tag <h1> para títulos

Tag <p> para parágrafos e <b> para negrito

Uso da Tag <br> para quebra de linha

Tag <p> para parágrafos e <i> para itálico

www.ifgoiano.edu.br/ceres
Atividade 01
● Considerando o exemplo anterior, como o uso das tags <h1> e <p>,
reproduza o código anterior, inserindo informações sobre você.
Imagine que você está descrevendo a alguém seu minicurrículo
para uma vaga de emprego.
● O código deve ser feito em apenas um documento HTML, salvo
em extensão .html e enviado no Moodle o arquivo codificado;
● Sinta-se a vontade de usar sua criatividade!!!

www.ifgoiano.edu.br/ceres
Atividade 01
● O objetivo é produzir algo no seguinte estilo:

www.ifgoiano.edu.br/ceres
Bons Estudos ;)
"Se é uma boa ideia, vá em frente
e faça".
(Grace Hopper)
Referências
● https://www.devmedia.com.br/como-funcionam-as-aplicacoes-web/25888
● https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5
● https://www.hostinger.com.br/tutoriais/diferenca-entre-html-e-html5/
● https://www.homehost.com.br/blog/tutoriais/o-que-e-html/
● http://proedu.rnp.br/bitstream/handle/123456789/612/Introducao_Program
acao_web_COR_CAPA_FICHA_ISBN_20130813.pdf?sequence=3&isAllowed=y

www.ifgoiano.edu.br/ceres