Curso de Desenvolvimento Web - Módulo 01 - HTML

645 visualizações

Publicada em

Curso desenvolvimento de Desenvolvimento Web, incluindo as linguagens HTML, CSS e Javascript. O conteúdo é dividido em 03 Módulos.

Publicada em: Internet
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
645
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
159
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Curso de Desenvolvimento Web - Módulo 01 - HTML

  1. 1. S Desenvolvimento Web Com HTML, CSS e JavaScript Prof. Rodrigo Santa Maria rodrigo@digitallymade.com.br
  2. 2. 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
  3. 3. 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;
  4. 4. “Você precisa correr cada vez mais rápido, apenas para continuar no mesmo lugar.” Lewis Carroll O Profissional de TI
  5. 5. 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;
  6. 6. 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
  7. 7. S A Internet
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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.
  14. 14. 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.
  15. 15. Execução no Cliente (Browser) S  HTML S  CSS S  Tableless S  JavaScript S  XML
  16. 16. S Mas o que é HTML?
  17. 17. 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” ... />
  18. 18. HTML Básico <html> <head> <title>Título da Página</title> </head> <body> Esta é minha primeira página. </body> </html>
  19. 19. 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>
  20. 20. 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.
  21. 21. 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">
  22. 22. 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.
  23. 23. 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>
  24. 24. S Principais Tags HTML
  25. 25. 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
  26. 26. 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
  27. 27. 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 &nbsp;   < Menor que &lt; < > Maior que &gt; > & E comercial &amp; & " Aspas &quot; " ' Apóstrofo &apos; (não funciona no IE) '
  28. 28. 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”/>
  29. 29. 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>
  30. 30. 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>
  31. 31. 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>
  32. 32. 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
  33. 33. 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, ...
  34. 34. 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
  35. 35. 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
  36. 36. 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>
  37. 37. 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>
  38. 38. 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.
  39. 39. 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.
  40. 40. 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> ...
  41. 41. S Estrutura de Arquivos
  42. 42. 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.
  43. 43. 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
  44. 44. 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.
  45. 45. 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.
  46. 46. S Exercício Prático Vamos praticar !?
  47. 47. 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.
  48. 48. 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.
  49. 49. 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
  50. 50. Exercícios Crie uma página com este layout:
  51. 51. Exercícios Crie uma página com este layout:
  52. 52. Exercícios Crie uma página com este layout:
  53. 53. Exercícios Faça uma página com o seguinte formulário:
  54. 54. 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.
  55. 55. Layout

×