Ferramentas para

desenvolvimento web e
Introdução a HTML
IFTO - TADS - 1º Período - Aplicativos Web
XAMPP
Para simular o modelo cliente-
servidor em que roda a Web,
precisamos, além do browser, do
servidor Web. O Apache será o
servidor utilizado durante as aulas.

O Apache poderia ser instalado

individualmente. Mas, para facilitar a
instalação e como no próximo
semestre vocês estudarão PHP,
utilizaremos o ambiente XAMPP.

O XAMPP, além de fornecer o

Apache, também, disponibiliza em
sua instalação o MARIADB, PHP e
Perl.
XAMPP
O endereço para baixar o Xampp
é:

https://www.apachefriends.org/p
t_br/index.html

Após a instalação do XAMPP,

para inicializá-lo, procure no
menu iniciar a opção XAMPP
Control Panel, que te permitirá
gerenciar os serviços
disponibilizados pelo XAMPP.
XAMPP (Painel de Controle)
● Ao teclar no ícone será
aberto o Painel de Controle.
● Verifique se na coluna
module o Apache está na
cor verde.
● Caso não esteja verde, a
coluna Actions
disponibilizará a opção Start
para iniciar o serviço do
Apache.
● Caso queira parar o serviço
tecle no botão Stop.
● A coluna Port(s) indica a
porta que o serviço está
rodando, a porta 80 é
padrão para o Servidor Web.
XAMPP (Testando o Apache)
Para verificar se o serviço do
Apache está funcionando
corretamente, acesse através do
browser o domínio
http://localhost

Deverá aparecer uma página

semelhante a imagem ao lado.
Disponibilizando seu projeto no servidor web local
Dentro da pasta de instalação do
XAMPP existe um pasta chamada
htdocs. O domínio localhost aponta
para está pasta.

Para disponibilizar seu site no domínio

local (localhost) basta colocar os
arquivos do seu projeto ou a pasta do
projeto na pasta htdocs.

No laboratório, a pasta htdocs está em

D:/xampp/htdocs

O painel de controle do XAMPP

disponibilizar o botão Explorer para
acesso direto
Acessando o site
Para ter acesso ao seu projeto, digite na
barra de endereço do browser a URL do
arquivo a ser acessado, lembrando que a
URL é composta de:

protocolo://dominio:porta/diretorios/
arquivo

A porta só será necessária se for dirente

da padrão que é 80

Exemplo de URL local:

http://localhost/meusite/index.html

Isso quer dizer que dentro da pasta

htdocs existe uma pasta chamada
meusite e dentro de meu site tem uma
página chamada index.html
Acessando o site (página inicial)
Observação: Os arquivos do site
poderiam ser colocados diretamente na
pasta htdocs, mas como haverá vários
projetos sempre criaremos a pasta do
projeto.

Convenciona-se que a página

index.html representa a página inicial
do web site. Então, caso a página a ser
a acessada seja a index.html, não é
necessário indicar o nome do
arquivo, pois o servidor web já está
configurado a procurar o arquivo index.
Atom editor
É um editor de texto que pode ser
utilizado para escrever em várias
linguagens, inclusive em HTML, CSS
e JavaScript.

Desenvolvido pelo GitHub, utilizando

o Electron

Múltiplas plataformas, múltiplos

painéis, autocomplementação
inteligente, navegador do sistema de
arquivos, gerenciador de pacotes e
temas.
Criando um Novo Projeto
Para criar um novo projeto acesse
a opção File->Add Project
Folder

Irá abrir uma janela; navegue até

o local onde deseja criar o
projeto; crie a pasta do projeto;
selecione a pasta e tecle Ok

Se a pasta já tiver sido criada

antes, selecione e tecle Ok.

A Opção Open Folder, também

poderia ter sido utilizada para
abrir um projeto existente.
Removendo o projeto da tela do Atom editor
Quando um novo projeto é
criado, na janela Project, ele é
listado.

Para remover o projeto da lista

de projetos abertos, tecle com o
botão direito do mouse sobre a
pasta e selecione a opção
Remove Project Folder.

Observação: O projeto não será

excluído do computador.
Criando um arquivo no projeto (ex. página
HTML)
Para criar um arquivo no projeto,
seja uma página HTML, uma CSS ou
um arquivo Javacript, tecle com o
botão direito do mouse sobre a pasta
que deseja criar o arquivo e
selecione a opção New File. Ou
ainda, selecione a pasta e tecle a.

No campo Enter the path for the

new file escreva o nome do arquivo
acompanhado da extensão e tecle
Enter.

LEMBRE-SE! Não coloque espaços e

acentos nos nomes do arquivos.
Criando uma subpasta no projeto
Para criar uma subpasta no projeto,
tecle com o botão direito do mouse
sobre a pasta onde deseja criar a
subpasta e selecione a opção New
Folder ou selecione a pasta e tecle
Shift+A.

No campo Enter the path for the

new folder escreva o nome da
subpasta.

Não coloque acentos e espaços

no nome dos arquivos. Também
evite caixa alta (maiúsculas).
Preferências
A opção Edit -> Preferences
permite editar configurações do
Atom, bem como, gerenciar
pacotes e temas.
Preferências (Escolhendo o tema)
Para escolher um outro tema,
selecione na coluna a esquerda
a opção Themes, o campo UI
Theme permite escolher um
tema entre os disponíveis.
Preferências (Gerenciar pacotes)
Na opção Packages é possível habilitar
(Enable), desabilitar (disable) ou
desinstalar (uninstall) os pacotes já
instalados.

Para instalar um novo pacote (ou tema)

acesse a opção Install, digite o nome do
pacote a ser instalado e tecle em
packages.
Autocompletar
O Atom editor possui uma excelente
funcionalidade de autocompletar.

Por exemplo: digite o nome ou parte do

nome da tag (sem os sinais<>), será
mostrada uma lista das tags que possuem
parte do que foi digitado, (selecione se
não for a primeira opção) tecle enter. O
Atom irá colocar os sinais na tag e fazer o
fechamento.

No exemplo da imagem ao lado, será

escrita toda a estrutura básica de uma
página HTML.
Introdução a HTML
O que é HTML?
A sigla HTML significa
Hypertext Markup Language,
que na tradução para o
português é Linguagem de
Marcação de Hipertexto.

HTML não é uma linguagem de

programação.

É composta por um conjunto de

etiquetas (tags).

As tags descrevem o conteúdo

do documento.
Tags HTML
Tags HTML são palavras-chaves
(nomes de marcas) cercados por <>
como <html>

Tags HTML normalmente vêm em

pares como <p> e </ p>

A primeira tag em um par é a tag de

início, a segunda tag é a tag final.
A marca final é escrita como a
marca de início, com uma barra
antes do nome da marca.

Marcas de inicio e fim também são

chamados de tags de abertura e tags
de fechamento
Versões
Versão Ano

HTML 1991

HTML + 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

(X)HTML 1.0 2000

HTML 5 2012

HTML 5.2 2017

W3C
O World Wide Web Consortium (W3C) é uma comunidade internacional
onde organizações de membros , funcionários a tempo inteiro e público
trabalham em conjunto para desenvolver padrões da Web . Conduzido
pelo inventor da Web e diretor Tim Berners-Lee e CEO Jeffrey Jaffe , a
missão do W3C é liderar a Web para todo o seu potencial. Entre em
contato com o W3C para obter mais informações. (w3c.org)

Fundada em 1994.

Responsável pela versão 4.1 do HTML

Atributos HTML
Elementos HTML podem ter
atributos

Atributos fornecem informações

adicionais a um elemento

Os atributos são sempre

especificados na tag de início

Atributos vêm em pares nome /

valor como: name = “value”
Estrutura Básica
Um página web é na verdade um
conjunto de textos e marcações
(tag’s) HTML com seus atributos
organizados hierarquicamente.

Existe um conjunto de tag’s que

compõem a estrutura básica de um
documento HTML, ou seja, devem
está em todas as páginas web.

Na imagem ao lado podemos

visualizar a estrutura básica de um
documento HTML5.
Estrutura Básica (DOCTYPE)
A instrução doctype define a
versão da linguagem HTML
utilizada no código-fonte do
documento.

Faz um link para um conjunto de

regras HTML.

A escrita <!DOCTYPE html>

especifica que o documento está
sendo escrito na versão HTML5.
Estrutura Básica (Elemento HTML)
Escrito logo após a instrução
DOCTYPE, é elemento raiz, que
demarca todo o código HTML.

Deve conter diretamente dentro

das suas tag’s apenas dois
elementos: um elemente HEAD e
um elemento BODY.
Estrutura Básica (Elemento HEAD)
É o cabeçalho do documento.
Agrupa informações sobre o
documento HTML.

Esse elemento deve conter uma

ocorrência do elemento TITLE e
o encoding.

COLOCAMOS TUDO QUE NÃO É

CONTEÚDO.
Estrutura Básica (Elemento TITLE)
Define o título do documento.
Só deve conter texto (sem
nenhuma tag) no conteúdo de
TITLE.

Irá definir a informação que será

mostrada na aba do browser.
Exibe o título para página em
mecanismo de busca.
Estrutura Básica (Elemento META)
Este elemento pode ser utilizado
para definir uma série de
informações sobre o documento
(autor, descrição, palavras
chaves, etc.), entre elas a
codificação de caracteres para o
documento.
Para definir a codificação de
caracteres utilizamos o atributo
charset.
Utilizamos o valor utf-8, pois
inclui praticamente todos os
caracteres conhecidos da
linguagem humana.
Estrutura Básica (Elemento BODY)
O elemento BODY recebe os
elementos de conteúdo da
página.
Comentário
É um recurso bastante utilizado
no “mundo do desenvolvimento
de programas”.

Pode-se colocar observações no

seu código que não serão
interpretadas pelo browser.
Podemos, também, comentar
partes dos códigos para testar o
resultado sem eles.

Em HTML, o comentário é feito

entre os sinais <!-- e -->
Elementos de título
Podemos criar títulos (e subtítulos)
de vários níveis.

A tag h1 define um título de nível

1; a tag h2 define um título de
nível 2; e assim por diante.

Podemos definir até seis níveis de

título.

Visualmente, por padrão, os título

são formatados em negrito e a
medida que aumenta o nível
diminui o tamanho da fonte.
Parágrafo (elemento P)
Para definir um parágrafo
utilizamos a tag p.

O texto marcado com a tag

parágrafo fará um quebra de
linha em relação ao texto
anterior e posterior as
marcações.
Imagens (elemento img)
Utilizamos a tag <img> para
definir uma imagem na página;
Exemplo:
Não possui tag de fechamento;
<img
Não esqueça de colocar a
src=“img/ifto.jpg”
extensão da imagem alt=“logo” >
(.jpg, .gif , .png);

Atributos Obrigatórios:
src: define a URL (endereço) da
imagem
alt: define um texto alternativo
para imagem
Exercício dirigido
1) Crie um projeto no Atom editor;
2) Dentro da pasta do projeto, crie uma pasta com o nome
imagens
3) Abra o Google Notícias (http://news.google.com.br) e
escolha um notícia que possua imagens;
4) Salve a imagem na pasta imagens criada
anteriormente;
5) Construa uma página HTML com o conteúdo da notícia
(não se preocupe com os links existentes);