curso de desenvolvimento web - módulo 01 - html
TRANSCRIPT
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: [email protected]
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
A Internet
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
S
Mas o que é HTML?
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>
S
Principais Tags 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> <td>linha 1, valor 2</td> </tr> <tr> <td>linha 2, valor 1</td> <td>linha 2, valor 2</td> </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> ...
S
Estrutura de Arquivos
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.
Estrutura de Arquivos
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
Estrutura de Arquivos
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
Crie uma página com este layout:
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.
Layout