html5-img
1 / 31

Tecnologias Web

Prof. Msc. Juliano Gomes Weber ( jgw@unijui.edu.br ) Tecnologias Web Notas de Aula – Aula 02 1º Semestre - 2010. UNIJUÍ – DETEC – Ciência da Computação. jgw@unijui.edu.br. Tecnologias Web. Objetivos da aula de hoje. O que vimos na aula 01? Introdução a HTML. Pré-requisitos:.

fordon
Download Presentation

Tecnologias 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. Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Tecnologias Web Notas de Aula – Aula 02 1º Semestre - 2010 UNIJUÍ – DETEC – Ciência da Computação jgw@unijui.edu.br Tecnologias Web

  2. Objetivos da aula de hoje O que vimos na aula 01? Introdução a HTML

  3. Pré-requisitos: • Domínio básico do Windows • Navegador instalado (Firefox ou Internet Explorer) • Bloco de Notas do Windows • Ou editor de texto puro a seu critério; • Não utilizaremos ambientes de geração automática de código durante as aulas e avaliações desta disciplina;

  4. Por que vamos trabalhar com código? • Entendimento total do trabalho efetuado • Manutenibilidade; • Identificação dos problema; • Sistemas Web complexos – milhares de linhas de código;

  5. HTML Hiper Text Markup Language É a linguagem padrão de construção de páginas CARACTERÍSTICAS: • Fácil de aprender e usar • Não requer conhecimento de lógica • Usa forma livre de escrita(case sensitive?)

  6. HTML: Hiper Text Markup Language Mas, o que é um “hipertexto” ? Possui texto, imagem, links, sons e Movimentos, tudo integrado em uma mesma página, criando maior interesse e produtividade de leitura

  7. HTTP – Hypertext Transfer Protocol Principal protocolo da Web utilizado para a comunicação entre os browsers e os servidores Toda requisição e resposta HTTP é montada sobre uma conexão cliente-servidor Não mantém estado (Stateless)

  8. Interação browser e servidor • Usuário especifica URL • Browser conecta com o servidor especificado na url • Browser prepara a requisição HTTP e a envia • Servidor busca o recurso identificado pela URL

  9. Interação browser e servidor • Servidor processa o pedido, prepara a resposta HTTP e a envia • Browser verifica as tags do recurso solicitado e repete o processo • Browser exibe os recursos

  10. Recursos web • Podem ser: • Páginas html • figuras (JPG, GIF, BMP...) • programas web (apsx, servlet, jsp...)

  11. Acesso a recursos web Servidor Web BROWSER HTTP BROWSER

  12. HTML Especificação HTML 4.01

  13. Introdução a HTML (HYPER TEXT MARKUP LANGUAGE) Linguagem para descrever páginas web Consiste normalmente de um cabeçalho e um corpo definidos por tags Os browsers são encarregados de interpretar as tags e formatar o texto adequadamente

  14. Introdução a HTML (HYPER TEXT MARKUP LANGUAGE) Não é uma linguagem de programação Possui extensão htm ou html

  15. Tags em HTML • São delimitados por < e > • Não são case-sensitive • Forma geral: <tag> texto </tag> • Outras formas: <tag atributo=“valor”> texto </tag> <tag /> <br> <hr>

  16. Exemplo de tags <b>Texto em negrito</b> <h1><b>Tags aninhadas</b><h1/> <img src="constr4.gif" width="144" height="50" />

  17. Estrutura de uma página HTML <html> <head> <title> Título </title> </head> <body> Textos Imagens Links </body> </html>

  18. Estrutura de um documento HTML Cabeçalho Corpo <html><head> <title>Título</title></head> <body> <p> Conteúdo </p></body> </html>

  19. Cabeçalho <html> <head> <title>Título da Página</title> </head> <body></body> </html>

  20. Conteúdo de uma página HMTL <html> <head></head> <body>Conteúdo da página</body> </html> • Texto • Imagens • Tabelas • Formulários • ...

  21. Texto sem formatação Texto sem formatação

  22. Texto com formatação • Negrito <B>Negrito</B> • Itálico <I> Itálico</I> • Sublinhado <U>Sublinhado</U>

  23. Texto com formatação • Tipo de letra <FONT FACE=“Impact”>Texto</FONT> • Tamanho <FONT SIZE=“6”>Texto</FONT> • Cor <FONT COLOR=“Blue”>Texto</FONT>

  24. Texto com formatação <FONT FACE=“Impact” SIZE=“6” COLOR=“Blue”>Texto</FONT>

  25. Títulos pré-definidos <H1>Título 1</H1> <H2>Título 2</H2> <H3>Título 3</H3> <H4>Título 4</H4> <H5>Título 5</H5> <H6>Título 6</H6>

  26. Texto com quebra de linha Linha 1<BR> Linha 2<BR> Linha 3<BR>

  27. Texto com Parágrafo <P>Parágrafo 1</P> <P>Parágrafo 2</P> <P>Parágrafo 3</P>

  28. Texto com Parágrafo Alinhado <P ALIGN=“LEFT”>Parágrafo 1</P> <P ALIGN=“RIGHT”>Parágrafo 2</P> <P ALIGN=“CENTER”>Parágrafo 3</P>

  29. Juntando tudo até o momento! <P ALIGN="CENTER"> <FONT COLOR="RED" FACE="VERDANA"> <B>Culinária</B> </FONT> </P> <P ALIGN="LEFT"> <FONT FACE="VERDANA" SIZE="2"> Faça delícias com presunto e queijo </FONT> </P>

  30. Exercícios de fixação • Explique o modelo Cliente Servidor. • O que é um protocolo? • Para que serve o DNS? • Qual a relação entre a Web e a Internet? • Diferencie Intranet, Internet e Extranet; • Qual a estrutura básica de uma página HTML? • Porquê devo estudar o código HTML?

  31. Tarefa para próxima aula • Fazer uma pesquisa sobre a forma de representação das cores RRGGBB. • Entregar no portal até a aula 3. • jgw@unijui.edu.br

More Related