Curso de Desenvolvimento Web - Módulo 01 - HTML

S
Desenvolvimento Web
Com HTML, CSS e JavaScript
Prof. Rodrigo Santa Maria
rodrigo@digitallymade.com.br

Sobre o Prof. Rodrigo Santa Maria
S  Bacharel em Ciência da Computação (PUC Minas);
S  Especialista com MBA Internacional em Gerenciamento de
Projetos (FGV/Ohio University, USA);
S  Professor Universitário (UNIFEOB);
S  Micro-empresário da área de TI;
S  Acesse: www.digitallymade.com.br
S  E-mail: rodrigo@digitallymade.com.br

Sobre o Prof. Rodrigo Santa Maria
S  Analista/Desenvolvedor de aplicações desde 2000;
S  Ex-IBMer (de 2009 a 2013);
S  Diretor-Presidente/Co-fundador do Instituto Internacional
de Ideias;
S  Fundador do Google Developers Group São João da Boa
Vista;

“Você precisa correr cada vez mais rápido,
apenas para continuar no mesmo lugar.”
Lewis Carroll
O Profissional de TI

Visão Geral
S  Ao final deste curso, você será capaz de:
S  Criar páginas HTML5;
S  Utilizar folhas de estilo CSS3;
S  Utilizar JavaScript e o framework jQuery;
S  Criar páginas com funcionalidades Ajax;
S  Utilizar frameworks como o Bootstrap;

Desenvolvimento Web
MÓDULO 01
S  Pauta:
Ø  Introdução ao Desenvolvimento Web
Ø  Introdução à comunicação na internet
Ø  O protocolo HTTP
Ø  As páginas da internet
Ø  O servidor web (Apache)
Ø  O ambiente de desenvolvimento e nossas ferramentas
Ø  HTML Base
Ø  Tags HTML
Ø  Exercícios

S  O cliente (navegador web) requisita uma página ao servidor.
S  O servidor web responde a requisição com a página requisitada e
a envia ao cliente.
Cliente
(Navegador Web) Servidor Web
Armazenamento
(HD)
Armazenamento
(Banco de Dados)
Requisição
Resposta
Comunicação na Internet

S  Hypertext Transfer Protocol (HTTP) é o protocolo
utilizado para enviar e receber informações na web.
S  É baseado em requisições e respostas entre clientes e
servidores.
S  Exemplo de requisição HTTP:
S  GET / HTTP/1.1
S  Foi criado especificamente para a World Wide Web.
Protocolo HTTP

S  Os clientes de uma conexão HTTP são os browsers
(navegadores).
S  São capazes de enviar requisições em protocolo HTTP e
processar os retornos recebidos, exibindo as páginas da
web.
S  Exemplos: Google Chrome, Internet Explorer, Edge,
Mozilla Firefox, Opera, etc.
Clientes HTTP

S  São serviços HTTP que disponibilizam as páginas na
Internet.
S  Exemplos:
S  Apache HTTP Server
S  Microsoft Internet Information Services
S  Nginx
Servidores HTTP

S  São codificadas em linguagem HTML (HyperText
Markup Language, que significa Linguagem de
Marcação de Hipertexto).
S  Possuem ligações de hipertexto.
S  São hospedadas por um servidor web.
Páginas da Internet

Vantagens
S  Portabilidade da solução no lado do cliente.
S  Facilidade de deployment.
S  Facilidade de manutenção, restauração e
atualização da aplicação.

Desvantagens
S  Número expressivo e crescente de dispositivos
diferentes com acesso a web (computação ubíqua).
S  Compatibilidade entre browsers.
S  Novos desafios para a Engenharia de Software:
S  Metodologias voltadas para o desenvolvimento web.
S  Computação Concorrente.

Execução no Cliente (Browser)
S  HTML
S  CSS
S  Tableless
S  JavaScript
S  XML

HTML
S  Hyper Text Markup Language
S  Especificação definida pelo consórcio W3C: http://www.w3.org/
S  Um arquivo html contém marcadores (tags)
S  Estes marcadores indicam para o navegador (browser) como a
página deve ser apresentada
S  Marcadores usualmente vem em pares: <tag>...</tag>
S  Também podem aparecer de forma abreviada: <tag
atributo=“valor” ... />

HTML Básico
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Esta é minha primeira página.
</body>
</html>

Estrutura HTML
S  Um documento HTML válido precisa seguir
obrigatoriamente a estrutura composta pelas tags <html>,
<head> e <body> e a instrução <!DOCTYPE>. Vejamos
cada uma delas:
S  A tag <html>
S  Na estrutura do nosso documento, antes de tudo, inserimos
uma tag <html>. Dentro dessa tag, é necessário declarar
outras duas tags: <head> e <body>. Essas duas tags são
"irmãs", pois estão no mesmo nível hierárquico em relação à
sua tag "pai", que é <html>. <html> <head></head>
<body></body> </html>

Estrutura HTML
S  A tag <head>
S  A tag <head> contém informações sobre nosso documento que
são de interesse somente do navegador, e não dos visitantes do
nosso site. São informações que não serão exibidas na área do
documento no navegador.
S  A especificação obriga a presença da tag de conteúdo <title>
dentro do nosso <head>, permitindo especificar o título do nosso
documento, que normalmente será exibido na barra de título da
janela do navegador ou na aba do documento.

Estrutura HTML
S  Configuramos qual codificação utilizar em nosso
documento por meio da configuração de charset na tag
<meta>. Um dos valores mais comuns usados hoje em dia é
o UTF-8, também chamado de Unicode. Há outras
possibilidades, como o latin1, muito usado antigamente.
S  O UTF-8 é a recomendação atual para encoding na Web
por ser amplamente suportada em navegadores e editores de
código, além de ser compatível com praticamente todos os
idiomas do mundo. É o que usaremos no curso.
S  <meta charset="utf-8">

Estrutura HTML
S  A tag <body>
S  A tag <body> contém o corpo do nosso documento, que é
exibido pelo navegador em sua janela. É necessário que o
<body> tenha ao menos um elemento "filho", ou seja, uma
ou mais tags HTML dentro dele.

A instrução DOCTYPE
S  O DOCTYPE não é uma tag HTML, mas uma instrução
especial. Ela indica para o navegador qual versão do HTML
deve ser utilizada para renderizar a página. Utilizaremos <!
DOCTYPE html>, que indica para o navegador a utilização
da versão mais recente do HTML - a versão 5, atualmente.
S  Usaremos:
S  <!DOCTYPE html>

HTML - Tags Básicas
Tag Descrição
<html> Define um documento HTML
<body> Define o corpo de um documento
<h1> ... <h6> Define cabeçalhos 1 a 6
<p> Define um parágrafo
<br> Insere uma quebra de linha
<hr> Define uma linha horizontal
 Define um comentário

HTML - Tags de Formatação
Tag Descrição
<b> Formata um texto em negrito
<big> Formata um texto com fonte maior
<em> Formata um texto com ênfase
<i> Formata um texto em itálico
<small> Formata um texto com fonte pequena
<strong> Formata um texto em destaque
<sub> Formata um texto subscrito
<sup> Formata um texto sobrescrito
<ins> Formata um texto sublinhado
<del> Formata um texto anulado

HTML Entidades
S  Utilizadas para apresentação de caracteres
especiais em html. Ex.: “<“
Saída Descrição Nome da Entidade Número
Espaço sem quebra    
< Menor que < <
> Maior que > >
& E comercial & &
" Aspas " "
' Apóstrofo ' (não funciona no IE) '

HTML Links e Imagens
S  <a href=“www.pucpcaldas.br”>Página PUC</a>
S  Página da PUC
S  <a name=“endereco”>Como Chegar</a>
S  Trecho da página que informa detalhes sobre localização
S  <a href=“www.pucpcaldas.br#endereco”>
Localização</a>
S  Localização
S  <img src=“logo.png” alt=“Logo da PUC”/>

HTML Tabelas
<table border="1">
<thead>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>linha 1, valor 1</td>
</tr>
<tr>
</tr>
</tbody>
</table>

HTML Background e Fontes
S  Formas de se definir um background preto para o
corpo da página
S  <body bgcolor="#000000">
S  <body bgcolor="rgb(0,0,0)">
S  <body bgcolor="black">
S  Definindo uma imagem de fundo
S  <body background="logo.gif">
S  <body background="http://www.pucpcaldas.br/bg.gif">
S  Configurando uma fonte
S  <font size="2" face="Verdana">Texto com fonte específica.</
font>

HTML Formulários
S  HTML possibilita a criação de formulários online utilizando tags
S  A tag <form> é a mais comum e permite a criação de um formulário de
entrada de dados
<body><form>
Nome: <input type="text" name="firstname"><br />
Sobrenome: <input type="text" name="lastname"><br />
Senha: <input type="password" name="senha">
</form></body>

HTML Formulários
S  Tipos que podem ser utilizados com a tag <input type=“?”>:
S  button: Insere um botão
S  checkbox: Insere um checkbox; para vários itens, basta inserirmos vários
“inputs” deste tipo
S  file: Insere botão seleção de arquivo através de uma caixa de diálogo
S  hidden: Campo pertencente ao formulário, mas que não será exibido na
página
S  image: Insere uma imagem como um botão submit
S  password: Insere um campo password (caracteres digitados não aparecem)
S  radio: Insere um radiobox (análogo ao checkbox)
S  reset: Restaura os valores iniciais do formulário
S  submit: Encaminha os dados inseridos para algum arquivo
S  text: Insere um campo de edição de texto

HTML Formulários
S  Quando algum elemento do tipo “submit” é inserido num
formulário e acionado, seus dados são enviados para um arquivo.
S  O arquivo mencionado é indicado pelo atributo “action” do
elemento <form>.
S  Este arquivo deverá estar armazenado num servidor web
(Apache, Tomcat, IIS, ...), e estará escrito em alguma linguagem
de programação de servidores (server-side):
php, jsp, asp, sevlets, ...

HTML Formulários
<body>
<form method=“get” action=“processaForm.php" >
Nome: <input type="text" name="firstname"><br />
Sobrenome: <input type="text" name="lastname"><br />
Senha: <input type="password" name="senha">
<input type="submit" value="Enviar">
</form>
</body>
S  URL após clicar no botão: .../puc/processaForm.php?
firstname=Carlos&lastname=Bazilio&senha=abcdefg

HTML
Outras tags de Formulários
Tag Descrição
<form> Define um formulário para entrada do usuário
<input> Define um campo de entrada
<textarea> Define um campo texto com múltiplas linhas
<label> Define um label para algum controle
<fieldset> Desenha uma caixa em torno de um conjunto de elementos
<legend> Define um título para um <fieldset>
<select> Cria uma lista drop-down
<optgroup> Criar uma hierarquia nas opções de uma lista drop-down
<option> Uma opção na lista drop-down
<button> Insere um botão. Difere de <input> por poder conter algum
conteúdo, como uma imagem

HTML Listas Não Ordenadas
S  Uma lista não ordenada é uma lista de itens. As listas de
itens são marcadas com bullets (tipicamente pequenos
círculos pretos).
S  Uma lista não ordenada começa com a tag <ul>. Cada item
da lista começa com a tag <li>:
<ul>
<li>Café</li>
<li>Leite</li>
</ul>

HTML Listas Ordenadas
S  Uma lista ordenada é também uma lista de itens. As listas
de itens são marcadas com números.
S  Uma lista ordenada começa com a tag <ol>. Cada item da
lista começa com a tag <li>.
S  <ol>
<li>Café</li>
<li>Leite</li>
</ol>

Meta Tags HTML
S  Meta Tag é um comando implementado no código de
páginas web, dentro da área Head do site (entre as tags
<head> e </head>) para passar instruções a programas
externos ou ações mais simples, como por exemplo
informar qual a pessoa responsável pelo desenvolvimento da
página. Algumas Meta Tags são utilizadas para passar aos
sites de busca como o Bing e o Google instruções sobre o
título da página e uma breve descriçao a ser exibida nos
resultados de busca, quais páginas devem ou não ser
indexadas, dentre outras instruções.

Meta Tags HTML e SEO
S  Meta Tags são uma importante ferramenta de comunicação
entre o webmaster e os sites de busca. Para muitas pessoas,
porém, SEO é apenas isso, Meta Tags. Isso está longe de
ser verdade. O Google utiliza perto de 250 variáveis para
determinar os resultados de busca, e as meta tags são apenas
algumas delas.

Meta Tags HTML e SEO
<html>
<head>
<title>Aprendendo sobre as meta tags </title>
<meta name="author" content="Erika Sarti”>
<meta name="description" content="Meta Tags - O que são e como
utilizá-las”>
<meta name="keywords" content="sites, web, desenvolvimento”>
</head> ...

Estrutura de Arquivos
S  Como todo tipo de projeto de software, existem algumas
recomendações quanto à organização dos arquivos de um
site.
S  Não existe obrigatoriedade ou padrão específico a seguir,
pois pode variar com cada projeto, mas recomenda-se criar/
seguir um padrão qualquer que seja.

S  Como um site é um conjunto de páginas Web e é comum
todos os arquivos de um site estarem dentro de uma só pasta
e, assim como um livro, é recomendado que exista uma
"capa", uma página inicial que possa indicar para o visitante
quais são as outras páginas que fazem parte desse projeto e
como ele pode acessá-las, como se fosse o índice do site.
S  Esse índice, não por coincidência, é convenção adotada pelos
servidores de páginas Web. Se desejamos que uma
determinada pasta seja servida como um site e dentro dessa
pasta existe um arquivo chamado index.html

S  Dentro da pasta do site, no mesmo nível que o index.html, é
recomendado que sejam criadas mais algumas pastas para
manter separados os arquivos de imagens, as folhas de estilo
CSS e os scripts.

Editores e IDEs
S  Existem editores de texto como Gedit (www.gnome.org),
Sublime (http://www.sublimetext.com/) e Notepad++
(http://notepad-plus-plus.org), que possuem realce de
sintaxe e outras ferramentas para facilitar o
desenvolvimento de páginas. Há também IDEs (Integrated
Development Environment), que oferecem recursos como
autocompletar e pré-visualização, como Eclipse e Visual
Studio.
S  Neste curso utilizaremos o Eclipse PDT, uma versão do
Eclipse modificada para desenvolvimento web e PHP.

S
Exercício Prático
Vamos praticar !?

Exercícios
S  Preparar uma página que inclua os seguintes elementos:
S  título com o nome dos alunos;
S  texto com um pequena saudação;
S  Incluir na página anterior as seguintes informações:
S  autor;
S  palavras-chave.
S  Fazer com que a página tenha três parágrafos:
S  a saudação já existente;
S  uma descrição da sala de aula;
S  uma descrição da roupa de um colega ao lado.

Exercícios
S  Incluir headers (<H1>) para cada um dos parágrafos.
S  Formatar o nome do colega (que aparece no parágrafo da
roupa) de forma a aparecer: todo o nome em ênfase, com o
sobrenome adicionalmente forte (strong).
S  Inserir em sua página a poesia "Batatinha quando nasce...",
em destaque (<BLOCKQUOTE>), e se lembrando de
mudar de linha onde requerido.

Exercícios
Criar uma lista como a seguinte:
•  Pais
•  João Silva
•  Maria Silva
•  Irmãos
•  João Silva Jr.
•  Maria Aparecida Silva
•  José Silva
•  Primos
•  Nenhum
•  Cores Favoritas Preto
1.  Branco
2.  Cinza

Exercícios
Crie uma página
com este layout:

Exercícios
Faça uma página com o
seguinte formulário:

Exercícios
Vamos recriar o site da Ciência da Computação da PUC!
1.  Siga o layout a seguir.
2.  Crie todas as páginas referenciadas no menu.

Curso de Desenvolvimento Web - Módulo 01 - HTML

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Curso de Desenvolvimento Web - Módulo 01 - HTML

Mais de Rodrigo Bueno Santa Maria, BS, MBA

Curso de Desenvolvimento Web - Módulo 01 - HTML