1 / 30

TEC. DESENVOLVIMENTO WEB

TEC. DESENVOLVIMENTO WEB. Prof.: Jean Carlo Mendes jean.mendes@gmail.com web@mendesnet.com.br http://www.mendesnet.com.br. Páginas Web.

drea
Download Presentation

TEC. DESENVOLVIMENTO WEB

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TEC. DESENVOLVIMENTO WEB Prof.: Jean Carlo Mendes jean.mendes@gmail.com web@mendesnet.com.br http://www.mendesnet.com.br

  2. Páginas Web • Uma página web é um arquivo ou documento de texto gravado com a extensão .html ou .htm, cujo conteúdo é composto basicamente de texto e códigos de marcação, conhecidos como tags HTML. • Pode conter textos, imagens, vídeos, animações, sons, etc... • Conhecida como Home Page

  3. Páginas Web • O acesso à páginas web é realizado através de programas conhecidos como navegadores (browsers) • IE, Firefox, Chrome, Opera, Safari, .... • O navegador, conectado à internet, faz uma requisição ao servidor web (através do endereço – URL). O servidor processa o pedido e devolve o documento HTML.

  4. Servidores Web

  5. Navegadores - Browser

  6. Navegadores – desktop - Mundo Fonte: http://gs.statcounter.com/#desktop-browser-ww-monthly-201308-201407

  7. Navegadores – desktop - Brasil Fonte: http://gs.statcounter.com/#desktop-browser-BR-monthly-201308-201407

  8. Navegadores – desktop - EUA Fonte: http://gs.statcounter.com/#browser-US-monthly-201308-201407

  9. Navegadores – mobile- mundo Fonte: http://gs.statcounter.com/#mobile_browser-ww-monthly-201308-201407

  10. Navegadores – mobile- Brasil Fonte: http://gs.statcounter.com/#mobile_browser-BR-monthly-201308-201407

  11. Navegadores – mobile- EUA Fonte: http://gs.statcounter.com/#mobile_browser-US-monthly-201308-201407

  12. Navegadores – tablet - mundo Fonte: http://gs.statcounter.com/#tablet-browser-ww-monthly-201308-201407

  13. Navegadores – tablet - Brasil Fonte: http://gs.statcounter.com/#tablet-browser-BR-monthly-201308-201407

  14. Navegadores – tablet - EUA Fonte: http://gs.statcounter.com/#tablet-browser-US-monthly-201308-201407

  15. O HTML • O HTML não é uma linguagem de programação. É uma linguagem de marcação • O HTML possuí um conjunto de tags • Uma página web é definida pelo conjuntos de tags associado ao texto da página. • Documentos HTML = Páginas Web

  16. HTML • A estrutura de um documento básico em HTML deve conter as seguintes tags: • HTML  (Indica o início do documento) • HEAD  (Seção de cabeçalho) • BODY  Corpo do documento

  17. HTML • As tags HTML (salvo algumas exceções) devem conter marcações de início e de fim. A marcação de fim é iniciada por uma barra “/” antes do nome da tag. • Exemplo: • <Body> • </Body>

  18. <html> <head> <title>Exemplo de página </title> <meta name=“Author” content=“José”> <meta name=“keywords” content=“EC, Programação”> </head> <body> Hello World! </body> </html>

  19. HTML • Exercício: • Criar uma página Hello World (ver slide anterior) • Gravar em um arquivo hello.html • Abrir a página no navegador...

  20. HTML - Acentuação • Alguns navegadores e SOs não conseguem lidar bem com caracteres acentuados escritos diretamente no documento HMTL. • Nestes casos é necessários informar a codificação do caracter especial • á  aacute; • â  acirc; • Ç  Ccedil; • Tabela de acentuação

  21. HTML - Cores • As cores devem ser definidas através de códigos hexadecimais, usando as definições de cores em RGB (Red, Green, Blue). Cada par de valor indica a intensidade da cor naquele canal. • Preto  #000000 • Branco  #FFFFFF • Azul  #0000FF • Tabela de cores

  22. HTML • Headings • Existem marcações (tags) especiais para textos de cabeçalhos. Estas tags são divididas por níveis. Cada nível é formatado de uma forma diferente (tamanho da fonte) • <h1> Cabeçalho Nível 1 </h1> • <h2> Cabeçalho Nível 2 </h2> • <h3> Cabeçalho Nível 3 </h3> • <h4> Cabeçalho Nível 4 </h4> • <h5 align=“center”> Cabeçalho Nível 5 </h5> • Exemplo Cabeçalhos aceitam atributo de alinhamento...

  23. HTML • Quebra de linhas • A quebra de linha em documentos HTML é feita através da tag <br>. Esta tag não precisa de fechamento. • Exemplo: Esta é a primeira linha. <br> Esta é a segunda linha. <br> Esta é a terceira linha.

  24. HTML • Formatação de parágrafos • Todo o corpo do documento HTML deve estar contido entre as tags <body> e </body> • O parágrafo é representado pela tag <p> • Quando o navegador encontra uma tag <p> ele avança uma linha e inicía a exibição na próxima linha

  25. HTML • O parágrafo aceita atributo de alinhamento: <p align=“center”> Este texto será centralizado </p> <p align=“left”> Este texto será alinhado à esquerda </p> <p align=“justify”> Este texto será justificado </p> • Exemplo

  26. HTML • Textos também podem ser centralizados usando a tag <center> • Exemplo: • <p> • <center>Este texto foi centralizado usando a tag center</center> • </p> • Exemplo

  27. HTML – Cor de fundo • A cor de fundo de uma página pode ser definida usando o atributo bgColor da tag <body> • <bodybgColor="#FFFF00"> • Exemplo • ** Observação. Este atributo está caindo em desuso. Será retirado na especificação final do HTML 5

  28. HTML – Sobrescrito e Subscrito • Representados pelas tags <sup> e <sub> Fórmula da água é: H<sub>2</sub>O Einstein disse que: E = mc<sup>2</sup> Exemplo

  29. HTML – Negrito e Itálico • Representados pelas tags <b> e <i> <b>Este texto está em negrito</b> <i>Este texto está em itálico</i>

  30. HTML – Exercício.... • Tente reproduzir, com o que sabe até o momento, a seguinte página Modelo - Crie variações da página desenvolvida acima, alterando-se as cores e formatações

More Related