320 likes | 454 Views
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:.
E N D
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: • 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;
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;
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?)
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
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)
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
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
Recursos web • Podem ser: • Páginas html • figuras (JPG, GIF, BMP...) • programas web (apsx, servlet, jsp...)
Acesso a recursos web Servidor Web BROWSER HTTP BROWSER
HTML Especificação HTML 4.01
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
Introdução a HTML (HYPER TEXT MARKUP LANGUAGE) Não é uma linguagem de programação Possui extensão htm ou html
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>
Exemplo de tags <b>Texto em negrito</b> <h1><b>Tags aninhadas</b><h1/> <img src="constr4.gif" width="144" height="50" />
Estrutura de uma página HTML <html> <head> <title> Título </title> </head> <body> Textos Imagens Links </body> </html>
Estrutura de um documento HTML Cabeçalho Corpo <html><head> <title>Título</title></head> <body> <p> Conteúdo </p></body> </html>
Cabeçalho <html> <head> <title>Título da Página</title> </head> <body></body> </html>
Conteúdo de uma página HMTL <html> <head></head> <body>Conteúdo da página</body> </html> • Texto • Imagens • Tabelas • Formulários • ...
Texto sem formatação Texto sem formatação
Texto com formatação • Negrito <B>Negrito</B> • Itálico <I> Itálico</I> • Sublinhado <U>Sublinhado</U>
Texto com formatação • Tipo de letra <FONT FACE=“Impact”>Texto</FONT> • Tamanho <FONT SIZE=“6”>Texto</FONT> • Cor <FONT COLOR=“Blue”>Texto</FONT>
Texto com formatação <FONT FACE=“Impact” SIZE=“6” COLOR=“Blue”>Texto</FONT>
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>
Texto com quebra de linha Linha 1<BR> Linha 2<BR> Linha 3<BR>
Texto com Parágrafo <P>Parágrafo 1</P> <P>Parágrafo 2</P> <P>Parágrafo 3</P>
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>
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>
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?
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