31
Tecnologias Web [email protected] Prof. Msc. Juliano Gomes Weber ([email protected]) Tecnologias Web Notas de Aula – Aula 02 1º Semestre - 2010 UNIJUÍ – DETEC – Ciência da Computação
Tecnologias Web [email protected]
Prof. Msc. Juliano Gomes Weber([email protected])
Tecnologias Web
Notas de Aula – Aula 021º Semestre - 2010
UNIJUÍ – DETEC – Ciência da Computação
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
BROWSER
BROWSER
Servidor WebHTTP
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
<html><head> <title>Título</title></head>
<body> <p> Conteúdo </p></body>
</html>
Cabeçalho
Corpo
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.
