Tecnologias Web Prof. Msc. Juliano Gomes Weber Tecnologias Web Notas de Aula – Aula 02 1º Semestre 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 Servidor Web HTTP

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 Não são case-sensitive Forma geral: texto Outras formas: texto

Exemplo de tags Texto em negrito Tags aninhadas

Estrutura de uma página HTML Título Textos Imagens Links

Estrutura de um documento HTML Título Conteúdo Cabeçalho Corpo

Cabeçalho Título da Página

Conteúdo de uma página HMTL Conteúdo da página Texto Imagens Tabelas Formulários...

Texto sem formatação

Texto com formatação Negrito Itálico Sublinhado

Texto com formatação Tipo de letra Texto Tamanho Texto Cor Texto

Texto com formatação Texto

Títulos pré-definidos Título 1 Título 2 Título 3 Título 4 Título 5 Título 6

Texto com quebra de linha Linha 1 Linha 2 Linha 3

Texto com Parágrafo Parágrafo 1 Parágrafo 2 Parágrafo 3

Texto com Parágrafo Alinhado Parágrafo 1 Parágrafo 2 Parágrafo 3

Juntando tudo até o momento! Culinária Faça delícias com presunto e queijo

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.