programação para aplicações web profa. semíramis assis 2015.2 ucsal – tecnologia em análise...
TRANSCRIPT
Programação para Aplicações WEBProfa. Semíramis Assis
2015.2
UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas
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.
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.
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.
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.
Introdução ao HTML• Exemplo de bloco Head simples:
• Exemplo de bloco Head mais completo:
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.
Introdução ao HTML• Estrutura básica do corpo de uma página HTML:
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
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>
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!
Introdução ao HTML• Exemplo de lista ordenada:
• Exemplo de lista não ordenada:
Introdução ao HTML• Exemplo de lista descritiva:
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!
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.
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.
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.
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.
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.
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).
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 ...”
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).
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!
Introdução ao HTML• Exemplo de tabela simples:
• Exemplo de tabela com bordas vermelhas:
Introdução ao HTML• Exemplo de tabela com cabeçalho horizontal:
• Exemplo de tabela com cabeçalho vertical:
Introdução ao HTML
Cores Existem duas formas de informar as cores:
Valor hexadecimal (segunda figura) Nome da cor (primeira figura)
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:
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.
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).
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.
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.
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.
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.
