Desenvolvimento Web, Notas de estudo de Matemática

Baixe Desenvolvimento Web e outras Notas de estudo em PDF para Matemática, somente na Docsity!

TREINAMENTOS

Desenvolvimento Web com

HTML, CSS e Javascript

- 1 de agosto de

• Sobre a K19 Sumário i
• Seguro Treinamento
• Termo de Uso
• Cursos
• 1 Introdução
  • 1.1 Client side e server side
  • 1.2 HTML, CSS e Javascript
• 2 HTML
  • 2.1 Estrtutura Básica
  • 2.2 Exercícios de Fixação
  • 2.3 Semântica HTML
  • 2.4 Parágrafos
  • 2.5 Exercícios de Fixação
  • 2.6 Cabeçalhos
  • 2.7 Exercícios de Fixação
  • 2.8 Links
  • 2.9 Exercícios de Fixação
  • 2.10 Exercícios Complementares
  • 2.11 Âncoras
  • 2.12 Exercícios de Fixação
  • 2.13 Imagens
  • 2.14 Exercícios de Fixação
  • 2.15 Tabelas
  • 2.16 Exercícios de Fixação
  • 2.17 Listas
  • 2.18 Exercícios de Fixação
  • 2.19 Exercícios de Fixação
  • 2.20 Exercícios de Fixação SUMÁRIO ii
  • 2.21 Formulário
  • 2.22 Exercícios de Fixação
  • 2.23 Exercícios de Fixação
• 3 CSS
  • 3.1 Estrutura de uma regra CSS
  • 3.2 Tipos de seletores
  • 3.3 Exercícios de Fixação
  • 3.4 Principais propiedades CSS
  • 3.5 Box model
  • 3.6 Posicionando elementos
  • 3.7 Cores em CSS
  • 3.8 Unidades de medida
  • 3.9 Desafios
• 4 JavaScript
  • 4.1 Declarando e inicializando variáveis em JavaScript
  • 4.2 Operadores
  • 4.3 Controle de fluxo
  • 4.4 Exercícios de Fixação
  • 4.5 Exercícios Complementares
  • 4.6 Funções JavaScript
  • 4.7 Objetos JavaScript
  • 4.8 Arrays
  • 4.9 Exercícios de Fixação
• A Javascript Avançado
  • A.1 Objetos
  • A.2 Exercícios de Fixação
  • A.3 Funções
  • A.4 Exercícios de Fixação
  • A.5 Arrays
  • A.6 Métodos das Strings
  • A.7 Exercícios de Fixação
• B JQuery
  • B.1 Introdução
  • B.2 Sintaxe
  • B.3 Seletores
  • B.4 Exercícios de Fixação
  • B.5 Eventos
  • B.6 Exercícios de Fixação
  • B.7 Efeitos
  • B.8 Exercícios de Fixação
  • B.9 Exercícios Complementares
  • B.10 HTML
  • B.11 Exercícios de Fixação
• C Respostas

1 SUMÁRIO

Sobre a K

A K19 é uma empresa especializada na capacitação de desenvolvedores de software. Sua equipe

é composta por profissionais formados em Ciência da Computação pela Universidade de São Paulo

(USP) e que possuem vasta experiência em treinamento de profissionais para área de TI.

O principal objetivo da K19 é oferecer treinamentos de máxima qualidade e relacionados às prin-

cipais tecnologias utilizadas pelas empresas. Através desses treinamentos, seus alunos se tornam

capacitados para atuar no mercado de trabalho.

Visando a máxima qualidade, a K19 mantém as suas apostilas em constante renovação e melho-

ria, oferece instalações físicas apropriadas para o ensino e seus instrutores estão sempre atualizados

didática e tecnicamente.

3 SUMÁRIO

Termo de Uso

Termo de Uso

Todo o conteúdo desta apostila é propriedade da K19 Treinamentos. A apostila pode ser utilizada

livremente para estudo pessoal. Além disso, este material didático pode ser utilizado como material

de apoio em cursos de ensino superior desde que a instituição correspondente seja reconhecida pelo

MEC (Ministério da Educação) e que a K19 seja citada explicitamente como proprietária do material.

É proibida qualquer utilização desse material que não se enquadre nas condições acima sem

o prévio consentimento formal, por escrito, da K19 Treinamentos. O uso indevido está sujeito às

medidas legais cabíveis.

SUMÁRIO 4

K01- Lógica de Programação

K11 - Orientação a Objetos em Java

K12 - Desenvolvimento Web com JSF2 e JPA

K21 - Persistência com JPA2 e Hibernate

K22 - Desenvolvimento Web Avançado com JFS2, EJB3.1 e CDI

K23 - Integração de Sistemas com Webservices, JMS e EJB

K31 - C# e Orientação a Objetos

K32 - Desenvolvimento Web com ASP.NET MVC

TREINAMENTOSTREINAMENTOSTREINAMENTOS Conheça os nossos cursos

www.k19.com.br/cursos

INTRODUÇÃO 2

Como acabamos de ver, as principais linguagens/tecnologias client side são HTML, CSS, Javas-

cript, Adobe Flash, Microsoft Silverlight e VBScript. De todas elas as três primeiras são as mais impor-

tantes e atualmente estão em maior evidência. Cada uma das três linguagens possui um papel bem

específico que podemos resumir da seguinte maneira: o código HTML será responsável por prover o

conteúdo de uma página, o código CSS irá cuidar da formatação visual do conteúdo apresentado e

o código Javascript permitirá que a página possua algum tipo de comportamento ("inteligência") e

que alguma interação possa ser feita com o usuário.

Nos próximos capítulos iremos abordar mais a fundo cada uma dessas três tecnologias.

HTML

C

A P Í T U L O 2

Quando acessamos uma página web estamos interessados na informação contida nessa página,

seja ela na forma de texto, imagem ou vídeo. O conteúdo de uma página web é, em geral, escrito na

linguagem HTML (HyperText Markup Language), que é uma linguagem de marcação originalmente

proposta por Tim Berners-Lee no final da década de 1980. Sua idéia era disseminar documentos

científicos de uma maneira simples e com uma sintaxe flexível o suficiente para que mesmo aqueles

sem muita familiaridade com a linguagem pudessem fazer o mesmo.

Desde sua proposta até os dias de hoje a linguagem sofreu diversas alterações em sua especifi-

cação de uma versão para outra, sendo a mais atual a especificação do HTML5 que está na fase de

"trabalho em progresso"(working draft), ou seja, sua especificação ainda não foi concluída, porém já

existem navegadores implementando alguns dos novos recursos definidos no HTML5.

As especificações do HTML são publicadas pelo World Wide Web Consortium mais conhecido

por sua sigla W3C. Além do HTML, o W3C também é responsável por linguagens como o XML, o SVG

e pela interface DOM (Document Object Model), por exemplo.

Estrtutura Básica

Um documento HTML é composto por elementos que possuem uma tag, atributos, valores e

possivelmente filhos que podem ser um texto simples ou outros elementos. Cada elemento deve

obrigatoriamente possuir uma tag e ela deve estar entre parênteses angulares (< e >). Veja o exemplo:

1 < html > 2 < head > 3 < meta http - equiv =" Content - Type " content =" text / html ; charset = UTF -8 " > 4 < title > Exemplo da estrutura básica de um documento HTML 5 6 < body > 7

Olá mundo!

8 9

Código HTML 2.1: Exemplo da estrutura básica de um documento HTML

5 HTML

Semântica HTML

De acordo com a especificação, cada tag possui um significado, isto é, o que o conteúdo de um

determinado elemento representa. Muitos autores utilizam o termo semântica HTML ao se referirem

ao uso correto dos significados de cada tag. Por exemplo:

1 < html > 2 < head > 3 < meta http - equiv =" Content - Type " content =" text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso correto da semântica HTML 5 6 < body > 7

Este é um texto para mostrar o significado da tag p.

8 9

Código HTML 2.3: Exemplo de uso correto da semântica HTML

Neste exemplo utilizamos novamente a tag p e de acordo com a especificação o elemento p re-

presenta um parágrafo. Neste caso, o elemento de tag p foi utilizado de maneira correta. Vejamos

outro exemplo:

1 < html > 2 < head > 3 < meta http - equiv =" Content - Type " content =" text / html ; charset = UTF -8 " > 4 < title > Meus amigos - Site do Jonas 5 6 < body > 7 < address > 8 Rafael Cosentino 9 rafael. cosentino@k19. com. br 10 Sócio fundador da K19 Treinamentos 11 Av. Brigadeiro Faria Lima , 1571 - Jardim Paulistano - São Paulo , SP 12 CEP 01452 - 13 14 15 < address > 16 Marcelo Martins 17 marcelo. martins@k19. com. br 18 Sócio fundador da K19 Treinamentos 19 Av. Brigadeiro Faria Lima , 1571 - Jardim Paulistano - São Paulo , SP 20 CEP 01452 - 21 22 23

Código HTML 2.4: Exemplo de uso incorreto da semântica HTML

Dessa vez utilizamos a tag address e, de acordo com a especificação, "O elemento address deve

ser utilizada pelos autores para fornecer informações de contato de um documento ou para a maior

parte de um documento. Este elemento normalmente aparece no início ou no final de um docu-

mento".

Se observarmos o exemplo mais atentamente, trata-se de uma página do site do Jonas (repare no

título da página), portanto provavelmente o autor da página é o Jonas e não o Rafael nem o Marcelo.

Além disso, devemos evitar o uso da tag address para informar endereços postais a menos que ele

seja relevante ao documento no qual ela foi inserida.

HTML 6

Parágrafos

Os parágrafos dentro de um documento HTML, em geral, são representados através da tag p.

Uma das características da tag p é que ela ocupa horizontalmente todo o espaço definido pelo ele-

mento pai. Esse é o comportamento dos elementos de bloco que discutiremos com mais detalhes

no tópico sobre CSS.

Por enquanto o importante é termos em mente que, pelo fato da tag p se um elemento de bloco,

o navegador irá ajustar o texto à largura do elemento pai realizando todas as quebras de linha neces-

sárias. Caso seja necessário forçar uma quebra de linha no meio de um texto, podemos utilizar a tag

br. Confira o exemplo:

1 < html > 2 < head > 3 < meta http - equiv =" Content - Type " content =" text / html ; charset = UTF -8 " > 4 < title > Exemplo de quebra de linha em um parágrafo 5 6 < body > 7

Um texto bem longo. Longo mesmo! Este parágrafo serve para demonstrar 8 o comportameto da quebra de linha automática , ou seja , sem utilizar 9 nenhum recurso para que a quebra ocorra.

10 11

Já este parágrafo demonstra a qubra de linha forçada. Percebeu?

12 13

Código HTML 2.5: Exemplo de quebra de linha em um parágrafo

Figura 2.2: Exemplo de quebra de linha em um parágrafo

HTML 8

Figura 2.3: Exemplo de cabeçalhos

Perceba que cada nível possui um tamanho diferente de fonte. Esse tamanho é determinado pelo

navegador e pode ser alterado através de regras CSS que veremos mais adiante.

Devemos utilizar os cabeçalhos com cautela, pois eles são utilizados como parâmetros de ran-

queamento da página por diversos buscadores como Google, Yahoo e Bing, por exemplo. O uso

correto das tags de cabeçalho faz parte das técnicas de SEO (Search Engine Optimization) que, como

o próprio nome já indica, são técnicas que ajudam a melhorar o ranqueamento de páginas dentro

dos buscadores.

De acordo com as técnicas de SEO devemos tomar os seguintes cuidados ao utilizarmos as tags

de cabeçalhos:

• Utilizar apenas uma tag h1 por página
• Utilizar no máximo duas tags h2 por página

Exercícios de Fixação

(^4) Crie um novo documento HTML, insira o código abaixo e salve-o com o nome cabecalhos-1.html

na pasta html. Em seguida abra o arquivo em um navegador.

1 < html > 2 < head > 3 < meta http - equiv =" Content - Type " content =" text / html ; charset = UTF -8 " >

9 HTML

4 < title > K02 - Desenvolvimento Web com HTML , CSS e Javascript 5 6 < body > 7 K02 - Desenvolvimento Web com HTML , CSS e Javascript 8 9

Atualmente , praticamente todos os sistemas corporativos possuem 10 interfaces web. Para quem deseja atuar no mercado de desenvolvimento 11 de software , é obrigatório o conhecimento das linguagens : HTML , CSS 12 e JavaScript.

13 14

Essas linguagens são utilizadas para o desenvolvimento da camada de 15 apresentação das aplicações web.

16 17 Pré - requisitos 18 19

Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X)

20

Lógica de programação

21 22 Agenda 23 24 Aos domingos 25 26

xx / xx / xxxx das 08:00 às 14:00

27

xx / xx / xxxx das 14:00 às 20:00

28 29 Aos sábados 30 31

xx / xx / xxxx das 08:00 às 14:00

32

xx / xx / xxxx das 14:00 às 20:00

33 34

Código HTML 2.8: cabecalhos-1.html

(^5) Imagine que você possua um site de culinária no qual você disponibiliza algumas receitas. Crie

uma página com uma receita fictícia utilizando cabeçalhos para organizar o seu documento. Utilize

quantos níveis de título achar necessário.

Links

Normalmente um site é formado por um conjunto de páginas que estão interligadas de alguma

forma. Para permitir que um usuário navegue de uma página para outra devemos utilizar os links.

Um link pode fazer a ligação de uma página para outra do mesmo site (link interno) ou para uma

página de outro site (link externo).

Para criarmos um link devemos utilizar a tag a. Porém, a tag a sem atributos não irá criar nenhum

link interno ou externo. Para que um link seja criado devemos, no mínimo, utilizar o atributo href

com o caminho relativo ou absoluto de uma outra página. Veja o exemplo:

1 < html > 2 < head > 3 < meta http - equiv =" Content - Type " content =" text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag a 5 6 < body > 7

Exemplo de link relativo

8

Outro exemplo de link relativo

9

Exemplo de link absoluto

10 11

11 HTML

Exercícios Complementares

(^1) Pesquise na internet como criar um iframe dentro de um documento HTML. Em seguida crie

uma página com alguns links e um iframe. Crie também alguns links na página contida pelo iframe.

Para cada link em ambas as páginas utilize valores diferentes para o atributo target e observe os

resultados.

Âncoras

Além de criar links para outras páginas o HTML nos permite criar links para uma determinada

seção dentro da própria página na qual o link se encontra ou dentro de outra página. Esse recurso

chama-se ancoragem , pois as seções para as quais queremos criar um link devem possuir uma ân-

cora.

Para criarmos uma âncora devemos utilizar novamente a tag a, porém sem o atributo href. Dessa

vez utilizaremos o atributo name para identificar a seção através de um nome.

O link também muda levemente, pois agora ao invés de passar somente o nome do arquivo da

página como valor do atributo href devemos passar o nome da seção prefixada com o caractere #.

1 < html > 2 < head > 3 < meta http - equiv =" Content - Type " content =" text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag a como âncora 5 6 < body > 7

Veja mais informações

8

Âncora em outra página

9 10 ... 11 ... 12 ... 13 14 Mais informações 15 16

17 ... 18 ... 19 ... 20

21 22

Código HTML 2.14: Exemplo de uso da tag a como âncora

Lembre-se Até a versão 4 do HTML e no XHTML a especificação dizia para utilizarmos o atributo

name para criarmos as âncoras. Porém, no HTML5, a recomendação do W3C é que se utilize o atributo id. Desenvolvedores mais preocupados em estar sempre atualizados

podem ficar tranquilos e utilizar somente o atributo id ao invés do name, pois os navegado-

res mais modernos conseguem interpretar o uso de ambos os atributos em qualquer versão do HTML.

HTML 12

Exercícios de Fixação

(^7) Crie um documento HTML que contenha um link que aponta para uma âncora dentro da própria

página. Dica: insira um conteúdo suficientemente grande para que a barra de rolagem vertical do

navegador apareça e coloque a âncora no final da página.

(^8) Continuando o exercício anterior, crie um novo link que aponte para uma âncora localizada

em outra página. Crie uma página com uma âncora para a qual o link que você acabou de criar irá

apontar.

Imagens

Provavelmente os sites na internet seriam muito mais entediantes se não fosse possível adicio-

nar algumas imagens ao conteúdo das páginas. Como não queremos que as nossas páginas fiquem

muito monótonas, neste capítulo iremos utilizar a tag img e melhorar um pouco a aparência das

páginas com algumas imagens.

A tag img possui o atributo src que utilizaremos para informar qual imagem queremos carregar

dentro de um documento HTML. O valor do atributo pode ser o caminho absoluto ou relativo de

uma imagem.

1 < html > 2 < head > 3 < meta http - equiv =" Content - Type " content =" text / html ; charset = UTF -8 " > 4 < title > Exemplo de uso da tag img 5 6 < body > 7 K19 Treinamentos 8 < img src =" http :// www. k19. com. br / css / img / main - header - logo. png " / > 9 10 Cursos 11

12 < img src =" http :// www. k19. com. br / css / img / k01 - logo - large. png " / > 13 K01 - Lógica de Programação 14

15

16 < img src =" http :// www. k19. com. br / css / img / k02 - logo - large. png " / > 17 K02 - Desenvolvimento Web com HTML , CSS e JavaScript 18

19

20 < img src =" http :// www. k19. com. br / css / img / k03 - logo - large. png " / > 21 K03 - SQL e Modelo Relacional 22

23

24 < img src =" http :// www. k19. com. br / css / img / k11 - logo - large. png " / > 25 K11 - Orientação a Objetos em Java 26

27

28 < img src =" http :// www. k19. com. br / css / img / k12 - logo - large. png " / > 29 K12 - Desenvolvimento Web com JSF2 e JPA 30

31 ... 32 ... 33 ... 34 35

Código HTML 2.18: Exemplo de uso da tag img