Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise...
-
Upload
goncalo-caetano-avelar -
Category
Documents
-
view
214 -
download
0
Transcript of Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise...
![Page 1: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/1.jpg)
Programação para Aplicações WEBProfa. Semíramis Assis
2015.2
UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas
![Page 2: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/2.jpg)
Introdução ao HTML Linguagem de marcação baseada
em tags. Tags possuem uma ordem
formando o corpo da página. Arquivos possuem extensão htm
ou html. Arquivos são interpretados pelo
navegador ao serem abertos.
![Page 3: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/3.jpg)
Introdução ao HTML Existem editores online que
permitem visualizar os resultados em tempo real!
http://liveweave.com/ é um bom exemplo!
Iremos utilizar a ide Eclipse ou qualquer editor de texto para codificação.
![Page 4: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/4.jpg)
Introdução ao HTML Cabeçalho - Contém as
informações básicas da página, como título, URL base para todas as URIs da página, inclusão de arquivos, informações sobre estilo e metadados.
![Page 5: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/5.jpg)
Introdução ao HTML Tags do Head:
<head> </head> - Indica início e fim do bloco de cabeçalho.
<title></title> - Título da página <base></base> - URL base para todas as URIs da página <link> </link> - Arquivos externos importados pela
página. <style> </style> - Configurações de estilo (CSS) da
página <meta></meta> - Configurações de metadados
(autor,descrição, palavras-chave,atualização periódica, codificação) da página.
<script> </script> - Scripts contidos na página ou importados por ela.
![Page 6: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/6.jpg)
Introdução ao HTML• Exemplo de bloco Head simples:
• Exemplo de bloco Head mais completo:
![Page 7: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/7.jpg)
Introdução ao HTML Bloco Body
Bloco contendo o corpo da página, como formulários, textos, etc. Tudo que será efetivamente visível ao usuário final.
![Page 8: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/8.jpg)
Introdução ao HTML• Estrutura básica do corpo de uma página HTML:
![Page 9: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/9.jpg)
Introdução ao HTML Comentários – Comentários em
HTML são feitos através da tag <!-- -->, servindo para bloco ou linha.
Quebra de linha – Feito através da tag <br>
Espaçamento – Utiliza-se o comando
![Page 10: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/10.jpg)
Introdução ao HTML Tags para títulos – Aumentam ou
reduzem o tamanho da fonte de acordo com a tag escolhida. Existem seis tipos: <h1> ... <h6>
![Page 11: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/11.jpg)
Introdução ao HTML Linhas – Feitas através da tag <hr>. Listagem – Podem ser ordenadas (tag
<ol>), não ordenadas (tag <ul>) ou de descrição (dl). Cada item é identificado com a tag <li> (tags <ol> e <ul>) e <dt> (tag <dl>).
Parágrafos – Definidos através da tag <p>. Navegador adiciona uma quebra automática entre parágrafos. Caso seja utilizado o atributo title, teremos uma DICA quando o mouse for posicionado em cima do texto!
![Page 12: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/12.jpg)
Introdução ao HTML• Exemplo de lista ordenada:
• Exemplo de lista não ordenada:
![Page 13: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/13.jpg)
Introdução ao HTML• Exemplo de lista descritiva:
![Page 14: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/14.jpg)
Introdução ao HTML Exercício rápido! Criar uma página
básica HTML com título, lista ordenada, lista não ordenada, uma lista descritiva e uma linha separadora entre cada uma das listas.
Listas podem conter novas listas! Como fazer isso? Testem!
![Page 15: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/15.jpg)
Introdução ao HTML Listas ordenadas podem conter
identificadores próprios. Exemplo: <ol type=“A”> - Ordenamento com letras
maiúsculas. <ol type=“a”> - Ordenamento com letras
minúsculas. <ol type=“I”> - Ordenamento com
algarismos romanos em maiúsculo. <ol type=“i”> - Ordenamento com
algarismos romanos em minúsculo.
![Page 16: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/16.jpg)
Introdução ao HTML Exercício! Modifique as listas
criadas anteriormente para algarismos romanos em maiúsculo e crie uma nova lista com numeração alfabética em minúsculo.
![Page 17: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/17.jpg)
Introdução ao HTML Listas não ordenadas podem conter
delimitadores próprios. Exemplos: <ul style="list-style-type:disc"> -
Adiciona círculos preenchidos aos itens. <ul style="list-style-type:circle"> -
Adiciona círculos não preenchidos aos itens.
<ul style="list-style-type:square"> - Adiciona quadrados preenchidos aos itens.
![Page 18: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/18.jpg)
Introdução ao HTML Exercício! Modifique a lista não
ordenada criada anteriormente para o tipo circle. Crie uma lista encadeada dentro desta lista modificada com o tipo square.
![Page 19: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/19.jpg)
Introdução ao HTML Novos elementos foram adicionados com o HTML
5, as principais são: <article> - Define um artigo no documento; <aside> - Define um conteúdo fora do conteúdo da
página; <details> - Define detalhes adicionais que o usuário pode
ver ou esconder; <dialog> - Uma caixa de diálogo ou janela; <figure> - Define imagens, diagramas, ilustrações, fotos,
códigos, etc... <footer> e <header> - Conteúdos para rodapé e
cabeçalho; <main> - Conteúdo principal do documento; <section> - Define uma seção no documento; <time> - Define data/hora.
![Page 20: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/20.jpg)
Introdução ao HTML Formatação de texto:
<i> e <em> - Coloca o texto em itálico (ênfase).
<s> e <del> - Risca o texto. <b> e <strong> - Coloca o texto em negrito
(destaque). <small> - Reduz o tamanho do texto. <sub> e <sup> - Texto sobrescrito e
superscrito. <ins> - Define um texto inserido (sublinhado).
![Page 21: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/21.jpg)
Introdução ao HTML Exercício! Escreva o seguinte texto
utilizando as tags de formatação <ins>, <b>,<i>, <sup>, <dell>,<small> e <sub>:
“É IMPORTANTE destacar expressões ad-hoc como 2 elevado n , log n na base 10 ...”
![Page 22: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/22.jpg)
Introdução ao HTML Tabelas
Definidas com a tag <table> Possui linhas (<tr>) e colunas (<td>), podendo possuir
cabeçalho (<th>). Principais Atributos:
Border – Adiciona bordas da espessura desejada. Bordercolor – Modifica a cor da borda. Colspan – Dá um merge em mais de uma coluna, numa mesma
linha. Rowspan – Dá um merge em mais de uma linha, numa mesma
coluna. Width – Define comprimento da tabela. Height – Define largura da tabela. Cellspacing – Define espaçamento entre colunas. Cellpadding – Define espaçamento entre conteúdo da coluna e suas
bordas. Align – Alinhamento de conteúdo. Pode assumir os valores left
(esquerda), center (centro), right (direita).
![Page 23: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/23.jpg)
Introdução ao HTML No HTML 5 as propriedades das
tabelas citadas anteriormente não são mais suportadas.
Como, então, resolver? Utilizando estilos via CSS!
![Page 24: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/24.jpg)
Introdução ao HTML• Exemplo de tabela simples:
• Exemplo de tabela com bordas vermelhas:
![Page 25: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/25.jpg)
Introdução ao HTML• Exemplo de tabela com cabeçalho horizontal:
• Exemplo de tabela com cabeçalho vertical:
![Page 26: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/26.jpg)
Introdução ao HTML
Cores Existem duas formas de informar as cores:
Valor hexadecimal (segunda figura) Nome da cor (primeira figura)
![Page 27: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/27.jpg)
Introdução ao HTML Exercício! Fazer uma tabela com 3 colunas e 3
linhas, tendo rótulos vertical E horizontal. Possuir comprimento de 100% e alinhamento do conteúdo centralizado. Colocar borda de 3px, na cor verde claro.Resultado esperado:
![Page 28: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/28.jpg)
Introdução ao HTML Tags importantes em HTML:
<img> - Adiciona um arquivo de imagem.
<a> - Adiciona links relativos ou absolutos ao conteúdo.
<iframe> - Exibe uma página dentro de outra página.
![Page 29: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/29.jpg)
Introdução ao HTML Tag <img>
Atributos: Src – Indica o caminho da imagem a ser
anexada. Alt – Indica um texto alternativo quando se
posiciona o mouse em cima da imagem. Width – Largura da imagem. Height – Altura da imagem. Align – Alinhamento (center, left, right).
![Page 30: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/30.jpg)
Introdução ao HTML Tag <a>
Atributos: Href – Indica o link para o
direcionamento. Target – Indica a janela alvo
(_blank,_parent) para abrir o link. Id – Indica um link interno na própria
página.
![Page 31: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/31.jpg)
Introdução ao HTML Exercício! Adicionar uma figura na
página de aprendizado já criada e colocar esta figura como um link para a página do Google. Em seguida, colocar esta figura como parte da informação da tabela anteriormente criada, com alinhamento centralizado.
![Page 32: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/32.jpg)
Introdução ao HTML Tag <iframe>
Atributos básicos: Src – Indica o endereço da página a ser carregada. Width – Comprimento do quadro na página. Height – Largura do quadro na página.
Novos atributos adicionados no HTML 5: Sandbox – Habilita um conjunto de restrições de conteúdo
para o iframe; Suportado em todos os navegadores. Seamless – Especifica que o iframe deve parecer uma parte
do documento em que está contido; Ainda não suportado em nenhum navegador.
Srcdoc – Especifica o conteúdo HTML para ser exibido no iframe. Caso o navegador suporte HTML5 e esta tag, o iframe irá substituir o conteúdo da tag src pelo conteúdo desta tag. Caso a tag não seja suportada, o navegador irá exibir o link da tag src. Não suportado no IE.
![Page 33: Programação para Aplicações WEB Profa. Semíramis Assis 2015.2 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas.](https://reader035.fdocument.pub/reader035/viewer/2022062522/570638601a28abb8238ff54c/html5/thumbnails/33.jpg)
Introdução ao HTML Exercício! Criar uma segunda página
com título testeIframe.html e, nesta nova página, criar dois parágrafos com um texto qualquer,sendo que em um deles inserir uma tabela e em outro uma imagem. Chamar esta nova página via iframe na primeira página criada.
Utilizar as novas tags do HTML 5 para verificar sua funcionalidade.