Html

ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE APLICAÇÕES MULTIPLATAFORMAS

atualizado com

HTML

Hyper Text Markup Language

CSS

Cascading Style Sheets Professor André Menegassi andremenegassi@unoeste.br andremenegassi.com.br

HTML

Hyper Text Markup Language

Introdução

O que é HTML • HTML é uma linguagem para escrever páginas web e significa Hyper Text Markup Language (Linguagem de Marcação de HiperTexto).

• Não é uma linguagem de programação, e sim uma linguagem de marcação.

• É a especificação padrão de como os hipertextos (páginas) para a Internet devem ser escritos, para padronização da interpretação pelos browsers (navegadores).

O que é HTML • Uma página na Internet é chamada de hipertexto pois pode conter referências/links para outras páginas.

• Documentos HTML são conjuntos de comandos escritos em um arquivo texto que são INTERPRETADOS pelos browsers (navegadores), como o Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari, Opera e etc.

XHTML - Introdução

O que é HTML

• Os documentos HTML são arquivos texto, que podem ser editados em editores simples como NOTEPAD, EDIT, VI e etc.

• Existem atualmente várias ferramentas que facilitam a produção de documentos, dentre elas podemos destacar os editores WYSIWYG (What you see is what you get).

• Os arquivos HTML devem ter extensão .HTML ou .HTM.

Histรณrico Versรฃo

Ano

HTML

1991

HTML+

1993

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML 1.0

2000

HTML5

2014 fonte: http://www.w3schools.com/html/html_intro.asp 06/05/2015

Suporte HTML5

fonte: http://html5test.com/results/desktop.html 08/10/2014

XHTML - Introdução

Exemplos de Apps HTML5

fonte: https://marketplace.firefox.com/developers/docs/reference_apps

Engine de navegadores • Cada navegador possui um motor de renderização (rendering engine) encarregado de exibir o conteúdo do documento HTML para o usuário.

Moto

Navegador

Gecko

Firefox, SeaMonkey, Camino, K-Meleon

KHTML

Konqueror

Presto

Opera, Opera Mobile, Nintendo Wii, Nintendo DS e Dsi

Trident

Internet Explorer

WebKit

Google Chorme, Safari, Epiphany, Adobe AIR, Android.

Blink

Google Chrome e Opera (

mais um engine?)

XHTML • É um subconjunto do XML (Extensible Markup Language linguagem de marcação extensível) que foi desenvolvido para se comportar como HTML, contendo, porém, apenas as coisas mais interessantes para a criação de hipertextos.

• Não é uma versão da linguagem HTML, e, sim, uma forma de utilizar os elementos HTML dentro do XML.

Transição para o HTML5 • Sintaxe compatível com HTML 4 e XHTML 1 (ainda bem!!!).

• Sintaxe HTML e XHTML juntas.

• Nada do que foi aprendido sobre X/HTML terá sido inútil.

• Retrocompatibilidade: Nenhum site deverá ter de ser refeito totalmente para se adequar aos novos conceitos e regras (W3C).

W3C: O que é você?

• Foi fundado em Outubro de 1994 para levar a World Wide Web a atingir seu potencial máximo através do desenvolvimento de protocolos comuns que promovam sua evolução e garantam sua interoperabilidade.

• Para saber mais sobre o W3C e como é importante ter páginas com códigos que seguem os padrões mundiais da internet, visite: http://www.w3.org

W3C: Validação de documentos • O objetivo da validação de documentos é saber se um documento segue o padrão definido pela versão da HTML adotada (ver Doctype).

• O site do W3C disponibiliza um super validador que analisa e valida a marcação dos documentos HTML. • http://validator.w3.org/

Primeiros passos

Tag • As tag HTML são rótulo, ou marcações ou elementos que indicam como o conteúdo deve ser apresentado/desenhado/ renderizado pelo agente cliente (normalmente o navegador por meio de sua engine).

• Diversas tag são disponibilizadas pela HTML, e cada uma tem uma funcionalidade específica.

• As tags têm o mesmo formato: começam com um sinal de menor “<” e acabam com um sinal de maior “>”, e normalmente vêm em pares, como <nometag> e </nometag>.

Tag • <nometag> .... </nometag>.

• A primeira tag do par é de chamada tag de início, a segunda tag é a tag final.

• Observe que na tag final existe o caractere / (barra), o que indica o fechamento da instrução iniciada pela tag de início.

• Exemplos: <b>Este texto será exibido em negrito</b> <i>Este texto será exibido em itálico</i> <h1>Este texto é um título</h1>

Tag • • • • •

As tags formam os elementos disponíveis pela HTML. As tags podem ser aninhadas dentro de outras tags.

Exemplo: <i><b>Texto</b></i> Exemplo: <i><b>Texto</i></b> - errado Não é possível sair inventando suas próprias tags, pois elas devem ser compatíveis com a versão HTML adotada.

• Além das tags de pares existem as tags órfãs, ou seja, não possui um par para fechá-la.

• Exemplos: <br /> <hr />

Atributos • Algumas tags apresentam atributos, que são informações adicionais sobre as tags. Um exemplo é a tag para definição de hiperlinks, <a>, que possui o atributo href e tem como valor o endereço de destino.

• Exemplo: <a href=“http://www.unoeste.br”>Clique aqui</a> • O valor do atributo deve sempre estar entre aspas (“”) e ficam na tag de início.

Tags estruturais do documento HTML <!DOCTYPE html>

<html lang="pt-br"> <head> <meta charset="utf-8" /> <title>Título</title> </head> <body> Conteúdo, texto, imagens, links e etc… </body> </html>

DOCTYPE Cabeçalho da página Corpo da página

Comentรกrios no cรณdigo <!-- Aqui comeรงa o menu --> <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx --> cรณdigo HTML do menu <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

Doctype • É a versão da HTML utilizada no documento e define como um navegador deverá exibir o conteúdo de um documento HTML. • Para estabelecer o tipo de um documento é necessário que o elemento <!DOCTYPE> apareça como o primeiro elemento, antes mesmo do elemento <html>.

Doctype • Em XHTML 1.0, três DTDs específicas podem ser referenciadas: • Strict • Loose (Transitional) • Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

Doctype • Em HTML 5 ficou mais fácil, o Doctype é simplicado: <!DOCTYPE html> • Retrocompatibilidade • Maneira de escrita flexível

Seção head • A seção head (cabeçalho) contém informações sobre o título do documento e meta tags.

• O par de tag <title> … </title> define o título da página (visualizado na barra de título do navegador). <head> <meta charset="utf-8" /> <title>Título</title> </head>

Seção head > metatags • Meta tags são elementos que descrevem informações sobre o documento HTML e não são visíveis no conteúdo. Essas informações são chamadas de metadados (dados sobre o dados).

• As meta tags são definidas no cabeçalho do documento pela tag <meta> que acompanha os atributos name e content nesta respectiva ordem. <head> <meta charset="utf-8" /> <title>Título</title> </head>

Seção head > metatags • Alguns dos valores suportado para o atributo name são: • Author: Autor da página.

• Description: Texto curto que o buscador apresentará como um resumo do conteúdo da página.

• Formatter: Quem desenhou a página.

• Generator: Indica a ferramenta que gerou a página.

• Keywords: Palavras chaves que definem o conteúdo da página. Utilizada por sites de busca.

Seção head > metatags • <meta name="description" content="Site da Unoeste" /> • <meta name="keywords" content="Graduação, pós-graduação" />

Seção head > metatag charset • Define o conjunto de caracteres do suportados pelo documento.

• Em XHTML 1 é assim: <meta http-equiv="content-type"

content="text/html; charset=XXX" />

• E no HTML5 simplificou: <meta charset="XXX">

• XXX = normalmente utf-8 ou iso-8859-1 • Sempre considere o uso do charset em documentos HTML.

Seção body • A seção body contém as especificações de cores, textos, links e marca o início do conteúdo do documento.

• Visível ao usuário.

<body> Conteúdo, texto, imagens, links e etc… </body>

Entidades HTML • Alguns caracteres são reservados do dicionário da HTML. Por exemplo, não é possível usar os sinais < e > dentro do texto, pois o navegador pode se confundir com tags de marcação.

• Outra a situação é o uso de alguns caracteres especiais e caracteres com acentuação.

• Para essa situação podemos substituir esses caracteres por entidades HTML, que quando processadas pelo navegador representa o caractere desejado.

Entidades HTML • Exemplo: • • • • •

espaço: &nbsp; <: &lt; >: &gt; ©: &copy; ç: &ccedil;

• Veja mais um monte de entidades em http://www.w3schools.com/tags/ref_entities.a sp.

Tags de formatação/ apresentação

Elementos HTML inline e de bloco • Classificação do comportamento de apresentação das tags: 1. Os elementos inline somente ocupam a largura necessária e não criam linhas antes e depois de si.

2. Elementos de bloco utilizam toda a sua largura disponível (configurável) de seu container, e criam uma linha invisível antes e depois de si próprio

Elementos HTML • <hr />: mostra uma linha horizontal na tela.

• <br />: quebra a linha • <p> ... </p>: iniciará um novo parágrafo e pulará uma linha entre o texto.

• <div> ... </div>: formatação de blocos.

• <h1..6> … </h1..6>: cria uma espécie de cabeçalho com padrões de formatação. Identifica o começo de uma seção/tópico. Pode variar de 1 a 6, sendo que 1 é o maior tamanho e 6 o menor.

• <blockquote> … </blockquote>: citações no texto.

• <address> … </address>: informações de contato.

Elementos HTML • • • • • • •

<b> … </b>: coloca em negrito o texto entre as tags. <i> … </i>: coloca em itálico o texto entre as tags. <em> … </em>: coloca em itálico o texto entre as tags. <u> … </u>: sublinha o texto entre as tags. _…: texto subscrito. ^…: texto sobrescrito. <span> … </span>: agrupa elementos em nível de linha.

Elementos HTML • <fieldset> … </fieldset>: cria um container para inserção de campos de formulário.

• <legend> … </legend>: aplicável dentro da tag fieldset e cria uma legenda.

• <label> ... </label>: define um rótulo para um campo de formulário (aguardar o uso de formulários).

• Atributos suportados:

• for – id do campo a qual o rótulo está associado.

• title – texto explicativo que aparecerá quando o mouse parar em cima do rótulo.

Elementos HTML (HTML5) • <details>: Define uma área escondida com informações adicionais que quando clicada é visualizada. <details> <summary>Veja Detalhes Detalhes Detalhes Detalhes Detalhes </details>

mais detalhes.</summary> <br /> <br /> <br /> <br /> <br />

Elementos HTML (HTML5) • <figure>: área destinada para conteúdos como imagens, ilustrações, diagramas, fotos, gráficos, videos, linha de código e similares. <figure> <figcaption>Gráfico: Média da turma</figcaption> <img src="grafico.png" alt="Média da turma" /> </figure>

• <mark>: marca o texto no estilo caneta grifa-texto. <mark>texto marcado</mark>

Elementos HTML (HTML5) â&#x20AC;˘ <meter>: mostra no formato de barra uma medida escalar entre dois valores (necessita de Javascript). <meter value="2" min="0" max="10"></meter> <br /> <meter value="0.6"></meter>

â&#x20AC;˘ <progress>: marca o andamento/progresso de uma tarefa (necessita de Javascript). <progress value="22" max="100"></progress>

Atividade 1

primeiros passos

Elementos HTML (HTML5) Tags semânticas • Tem o comportamento de bloco (estilo DIV) e não tem representação visual, simplesmente demarcam áreas significativas dentro do documento. 

<section> … </section>: demarca uma ou várias áreas genéricas que agrupa elementos de conteúdo dentro da página.



<header> … </header>: demarca o conteúdo relacionado ao cabeçalho da página ou uma sessão (não confundir com a tag <head>). Pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.



<footer> … </footer>: demarca o conteúdo relacionado ao rodapé da página ou a uma sessão.

Elementos HTML (HTML5) Tags semânticas 

<article> … </article>: demarca uma área de conteúdo autossuficiente: um post, notícia, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum dentro da página ou em uma sessão.



<nav> … </nav>: define uma área de navegação, normalmente o menu da página que leva a outras páginas do site. Nem todos os grupos de links devem ser elementos nav.



<aside> … </aside>: define uma área com conteúdo adicional/complementar (arquivos, posts, links, etc…), que está ligeramente associado ao conteúdo principal.

Elementos HTML (HTML5) Tags semânticas header nav article ou nav

article

aside

footer

Elementos HTML (HTML5) • <audio> … <audio>: Incorpora audio nas páginas. Suporta os formatos de audio: Ogg Vorbis, MP3, Wav e Stream. <audio id="audioTeste" src="audio.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>

• Habilitando fontes de audio alternativas (crossbrowser): <audio controls="controls"> <source src="audio.ogg" type="audio/ogg" /> <source src="audio.mp3" type="audio/mp3" /> Seu navegador não suporta o elemento audio da HTML5 </audio>

Elementos HTML (HTML5) > audio • Atributos • preload: tipo de carregamento do audio (valores: none, metadata ou auto).

• controls: faz o navegador mostrar a barra de controle.

• autoplay: faz o audio iniciar assim que a página for descarregada.

• loop: repete o som indefinitivamente.

• Manipulação por Javascript • audioTeste.play(); • audioTeste.pause(); • audioTeste.volume += 0.1; • audioTeste.volume -= 0.1;

Elementos HTML (HTML5) • <video> … </video>: Incorpora video nas páginas. <video src="video.mp4" controls="controls" autoplay="autoplay" loop="loop"></video> •

Atributos •

width/height : define largura/altura para o vídeo.

•

poster: define uma imagem para uma “capa” para o vídeo. Se omitido, o primeiro frame do vídeo é definido como capa.

•

preload: tipo de carregamento do vídeo (valores: none, metadata ou auto).

•

controls: faz o navegador mostrar a barra de controle.

•

autoplay: faz o video iniciar assim que a página for descarregada.

•

loop: repete o vídeo indefinitivamente.

Elementos HTML (HTML5) > video • Habilitando fontes de vídeo alternativas (crossbrowser): <audio controls="controls"> <source src="audio.ogg" type="audio/ogg" /> <source src="audio.mp3" type="audio/mp3" /> Seu navegador não suporta o elemento vídeo da HTML5 </audio>

• Legendas (sem suporte nos navegadores): <video width="320" height="240" controls="controls"> <source src="video.mp4" type="video/mp4" /> <track kind="subtitles" label="Inglês" srclang="en" src="Legenda_en.src"></track> <track kind="subtitles" label="Português" srclang="pt-br" src="Legenda_ptbr.src"></track> </video>

Atributo ID • Toda tag HTML pode ter o atributo ID. • Seu valor identifica o elemento dentro do documento HTML. • Deve ser único dentro do documento.

• Usado por outros recursos como CSS e Javascript para manipular o elemento.

• Exemplo: <div id="divPrincipal"> <h1 id="h1Titulo">Título</h1> </div>

Ferramentas para desenvolvedores

Ferramentas para desenvolvedores • Todo navegador moderno tem algum recurso para ajudar o programador a testar suas páginas HTML. • As ferramentas de desenvolvedores dão poder para analisar uma página HTML em execução.

• É possível analisar o HTML que o navegador está renderizando, como também a CSS. • Analisar e “debugar” código Javascript.

Ferramentas para desenvolvedores • FIREFOX: Desenvolvedor Web (nativo) e o Firebug (complemento).

• INTERNET EXPLORER: Ferramenta de Desenvolvedores.

• CHROME: Ferramentas do Desenvolvedor.

• SAFARI: Desenvolver.

• Opera: Dragonfly.

css

Cascading Style Sheets

Introdução

O que é CSS • Cascading Style Sheets - Folhas de Estilo em Cascata • Não é uma linguagem de programação, é uma linguagem de estilo.

• Define a apresentação de documentos HTML. • Separação entre o formato e o conteúdo de um documento.

O que é CSS • Existem duas características essenciais que devem ser levadas em consideração na montagem das páginas web: • sua estrutura - a divisão do conteúdo estruturada é controlada por tags HTML (<body>, <h1>, <p>, <ol>, <li>, <table> , etc).

• sua apresentação - a criação de efeitos visuais por meio da CSS.

Histórico • A CSS tem várias versões, a CSS 1 tornou-se uma recomendação pelo W3C no final de 1996 e contém propriedades básicas, a CSS 2 aprimorou isso e adicionou conceitos avançados.

• O W3C começou antes do início deste milênio o trabalho da CSS 3. O nível 3 ainda está em desenvolvimento e incluiu facilidades como bordas arredondadas, sombras, duas imagens como background de um mesmo objeto, múltiplas colunas de texto, fontes personalizadas, etc...

DOM (Document Object Model) • DOM (Document Object Model - Modelo de Objetos de Documentos).

• É uma especificação da W3C, independente de plataforma e linguagem (cross browser).

• Representa como as marcações em HTML, XHTML e XML são organizadas e lidas pelo navegador.

DOM (Document Object Model) • DOM é organizado em árvore.

DOM (Document Object Model) • HTML/DOM - Exemplo: <html> <head> <meta charset="utf-8" /> <title>Exemplo DOM</title> </head> <body> <h1>Título</h1> <p>Texto do <i>parágrafo</i>.</p> </body> </html>

DOM (Document Object Model) <html> <head> <meta charset="utf-8" /> <title>Exemplo DOM</title> </head> <body> <h1>Título</h1> <p>Texto do <i>parágrafo</i>.</p> </body> </html>

document

<html> <body>

<head>

<meta>

<title>

<h1>

“Exemplo DOM”

“Título”

<p>

“Texto do”

<i>

“Parágrafo”

“.”

Atividade 2

DOM

XHTML - Introdução

Seletores

• Para estilizar um determinado elemento da página utilizando CSS, é necessário ter uma maneira de selecionar esse elemento.

• Conhecer o DOM se faz importante.

• Na CSS a parte de uma regra de estilo que seleciona elementos da página é chamada de seletor.

• Formato de um seletor: seletor {propriedade-css: valor;}

Seletores > Sintaxe seletor1 { propriedade1: valor; propriedade1: valor; propriedade1: valor; } seletor2 { propriedade1: valor }

/*o ; na Ăşltima prop. ĂŠ opcional*/

Seletores > Sintaxe • Na regra CSS a seguir: h1 {color: blue} • A terminologia correta é: • h1 - seletor; • {color: blue} – regra a ser aplicada ao elemento selecionado; • color - propriedade; • blue - valor. fonte: http://www.maujor.com/tutorial/abreviacss.php 17/02/2013

Seletores > Sintaxe • Propriedades com valores múltiplos • Definição de estilo: body { background: white; color: maroon; font-family: helvetica, sans-serif; }

• Estão especificadas 2 famílias de fontes a serem usadas: a helvetica e a sans-serif. Neste caso, os valores possíveis para uma mesma propriedade devem estar separados por vírgula (,).

Seletores > Sintaxe • E a sintaxe correta é: • • • •

Escrever o seletor e a seguir a declaração; A declaração deve estar entre { } (chaves); Na declaração, separar a propriedade e o valor por : (dois pontos); É permitido usar espaços em branco em qualquer quantidade entre cada um dos caracteres da regra; • É permitido agrupar declarações em uma mesma regra e neste caso as declarações deverão ser separadas por ; (ponto-e-vírgula) podendo todas elas estar em uma mesma linha ou em linhas distintas. É facultativo o uso de ; (ponto-e-vírgula) após a última declaração na regra; • É indiferente o uso de maiúsculas e minúsculas em uma regra CSS, contudo as classes e ID's devem seguir a mesma grafia constante da marcação. fonte: http://www.maujor.com/tutorial/abreviacss.php 17/02/2013

XHTML - Introdução

Tipos de Seletores • Tipos de seletores: • Seletores de tipos • Seletores de ID (usam a tag ID) • Seletores de classes não-associadas (usam ao atributo class)

Seletores de tipo • Seletores de tipos: p {color: black} h1 {font-weight: bold; background-color: red;}

• Seleciona elementos da página pelo tipo da tag utilizada.

Seletores de tipo • Exemplo • CSS: em {color: blue} • HTML: <body> <p>This is some <em>text</em></p> <p>This is some text</p> <ul> <li>List item</li> <li>List item</li> <li>List <em>item</em></li> </ul> </body>

Seletores de ID • Exemplo: • CSS: #introducao • HTML:

{font-style: italic; }

<p id=“introducao”>This is some text</p>

• Seleciona elementos da página utilizando o atributo ID. • #: Identifica que é um seletor de ID.

Seletores de classes nãoassociadas • Seletores de classes não-associadas: .texto-vermelho {color: red;}

• Seleciona elementos da página usando o valor do atributo class utilizado nas tag.

• . (ponto): Identifica que é um seletor de classes não-associadas.

Seletores de classes nãoassociadas • Exemplo • CSS: .big { font-size: 110%; font-weight: bold; } • HTML: <body> <p class="big">This is some <em>text</em></p> <p>This is some text</p> <ul> <li class="big">List item</li> <li>List item</li> <li>List <em>item</em></li> </ul> </body>

• É possível usar diferentes configurações para uma mesma classe: li.big {color: red} p.big {color: blue}

Seletores descentes • Permite definir a formatação para um elemento interno a outro.

• CSS: p em { color:blue } • HTML: <body> <h1>Heading <em>here</em></h1> <p>Lorem ipsum dolor <em>sit</em> amet.</p> </body>

• Somente afeta o elemento em interno a um parágrafo.

• IMPORTANTE: A formatação independe da quantidade de níveis.

Seletores filhos • • • •

Define-se que a formatação deve respeitar a hierarquia.

Apenas um nível após (filho imediato).

CSS: div > em { color: blue} HTML: <h1>Heading <em>text</em></h1> <div>This is some <em>text</em> <p>This is a paragraph of <em>text</em></p> </div>

• Somente afeta o elemento em interno a um parágrafo.

• A formatação é somente para elementos do primeiro nível.

Seletores universal • Seleciona todos os elementos do documento.

• CSS: * { color: blue } • HTML: <h1>Heading <em>text</em></h1> <div>This is some <em>text</em> <p>This is a paragraph of <em>text</em></p> </div>

• Aplicará a regra CSS a todos os elementos do documento.

Vale a pena visitar • Outros seletores: • http://www.w3schools.com/cssref/css_selectors.asp

• Efeitos/Estilos prontos em CSS3 • • • •

http://www.css3maker.com/ http://www.css3.info http://css3generator.com http://www.colorzilla.com/gradient-editor/

Utilizando CSS • Incorporado ao documento • Importado ao documento • inline (diretamente na tag HTML)

Utilizando CSS • Exemplo de uma página web simples sem nenhuma formatação de estilo: <html> <head> <title></title>

</head> <body> <h1>Página sem formatação de estilos</h1> <p>Texto texto texto texto.</p> </body> </html>

Utilizando CSS > Estilo incorporado • Uma definição deste tipo deve ser usada quando não existe um padrão comum aos vários documentos de um site - ou então o site é composto de um único documento. <html> <head> <title></title> <style type="text/css"> h1 { text-align: center; color: blue } p { font-family: serif } </style> </head> <body> <h1>Página sem formatação de estilos</h1> <p>Texto texto texto texto.</p> </body> </html>

Utilizando CSS > Estilo importado • A definição é feita num arquivo separado e importado na página. <html> <head> <title></title> <link rel=“stylesheet” href=“formatar.css”> </head> ...

Utilizando CSS > Estilo inline • A definição da CSS é feita diretamente na tag HTML com o uso do atributo style. <html> <head> <title></title> </head> <body> <h1>Página com formatação de estilos</h1> <p style=“font-family:verdana”>Ao longo do texto, as <em>palavras chaves</em> estarão realçadas.</p> </body> </html>

Prioridade • Sempre o mais próximo do elemento tem prioridade.

• 2º Arquivo importado / incorporado • 1º inline

Fontes • font-size: Define o tamanho da fonte através de unidades de medidas ou através das palavras chaves xx-small, x-small, small, medium, normal, large, x-large ou xx-large.

• font-family: Define a família de fontes.

Fontes • font-style: Define a inclinação da fonte, sendo os possível valores: normal, italic ou oblique.

• Quando não especificado, o valor default é normal. O efeito de italic e oblique é exatamente o mesmo.

• font-weight: Define a quantidade de negrito a ser aplicado aos caracteres. Possíveis valores: lighter, normal, bold ou bolder, ou ainda valores absolutos 100, 200, 300, 400, 500, 600, 700, 800 ou 900.

Alinhamento • text-align: Permite alinhar o texto de um bloco à esquerda (left), à direita (right), em ambas as margens (justify) ou centralizado (center) • Valores possíveis: left ou right ou justify ou center.

Decoração • text-decoration: Decora o texto.

• Possíveis valores: • none: texto normal, sem nenhum efeito especial. Este é o valor padrão.

• underline: texto sublinhado.

• overline: ao contrário do texto sublinhado, uma linha é traçada acima do mesmo.

• line-through: texto riscado, ou seja, uma linha é traçada no meio do texto.

• blink: o texto adquire o efeito piscante. Este tipo de efeito não é suportado por todos os browsers.

Transformação • text-transform: Esta propriedade afeta a caixa das letras no texto.

• Possíveis valores: • capitalize: a primeira letra de cada palavra é transformada para maiúscula, não importando como foi escrita originalmente. As demais letras não são afetadas.

• uppercase: todas as letras do texto são transformadas para maiúsculas.

• lowercase: todas as letras são transformadas para minúsculas.

Outras formatações • letter-spacing: Espaçamento entre caracteres.

• line-height: Altura da linha.

• text-indent: Identação de texto • direction: Direcionando o texto para esq./dir.

• ltr: texto escrito da esquerda para a direita • rtl: texto escrito da direita para a esquerda

Sombra no texto (CSS3) • Com a propriedade text-shadow é possível colocar sombra em texto: text-shadow: (1) posição horizontal (2) posição vertical (3) blur da sombra (4) cor da sombra;

• Exemplo: p { text-shadow: 3px 3px 3px red; }

Margin e Padding • Por padrão, todos os elemento ficam “grudados”.

• Duas propriedades permitem adicionar espaço em torno de elementos HTML de nível de bloco.

• Essas propriedades são chamadas de "margin" e "padding".

Box Model

elemento

• margin: margem externa (espaço entre os elementos externos e a borda).

• padding: margem interna (espaço entre a borda e o conteúdo).

Margem externa - margin • Os valores das margens externas de um elemento podem ser atribuídos individualmente da seguinte forma: • • • •

margin-top: valor (margem superior) margin-right: valor (margem da direita) margin-bottom: valor (margem inferior) margin-left: valor (margem da esquerda)

• Quando o valor não é indicado é adotado o valor default nulo (zero).

• O valor pode ser expresso de forma explícita (um número e uma unidade, como em 10px) ou de forma percentual (como em 20%).

Margem externa - margin • Versão resumida

margin: 1px 2px 3px 4px; • Ordem: • Top (margem superior 1px) • Right (margem da direita 2px) • Bottom (margem inferior 3px) • Left (margem da esquerda 4px)

Margem interna - padding • Os valores das margens internas de um elemento podem ser atribuídos individualmente da seguinte forma: • • • •

padding-top: valor (margem superior) padding-right: valor (margem da direita) padding-bottom: valor (margem inferior) padding-left: valor (margem da esquerda)

• Quando o valor não é indicado é adotado o valor default nulo (zero).

• O valor pode ser expresso de forma explícita (um número e uma unidade, como em 10px) ou de forma percentual (como em 20%).

Margem interna - padding • Versão resumida

padding: 1px 2px 3px 4px; • Ordem: • Top (margem superior 1px) • Right (margem da direita 2px) • Bottom (margem inferior 3px) • Left (margem da esquerda 4px)

Bordas • As bordas são margens externas entre o elemento e sua própria margem externa e interna.

• Box Model:

elemento

Bordas â&#x20AC;˘ Tipos de bordas:

â&#x20AC;˘ Exemplos em http://maujor.com/tutorial/interativo/iborder.php

Bordas • Definindo a borda:

border: 1px solid #4cff00; • O primeiro valor define a espessura da borda.

• O segundo valor define o tipo da borda (sólida, pontilhada...).

• O último valor define a cor da borda.

Bordas • É possível tratar cada lado da borda de forma individual, definindo estilos diferentes: border-bottom: 5px solid red; border-top: 10px solid blue;

• E ainda é possível especificar separadamente cada propriedade: border-bottom-color:red; border-bottom-style:solid; border-bottom-width: 1px;

Alterando o comportamento do box-model

#div1 {

#div1 {

background-color:blue; width:50%; height: 200px;

background-color:blue; width:50%; height: 200px;

}

}

#div2 {

#div2 { background-color: blue; width: 50%; height: 200px; border:10px solid red; padding: 10px;

background-color: blue; width: 50%; height: 200px; border:10px solid red; padding: 10px; box-sizing: border-box;

}

}

Bordas com cantos arredondados (CSS3) • Com a propriedade border-radius é possível deixar os cantos de alguns elementos arrendondados: border-radius: nível de arredondamento; • Exemplo: div{ text-align:center; width:200px; height: 100px; background: #ccc; border: black solid 2px; border-radius: 25px; }

Bordas com sombras (CSS3) • Com a propriedade border-shadow é possível colocar sombra nas bordas: box-shadow: (1) posição horizontal (2) posição vertical (3) blur da sombra (4) cor da sombra; • Exemplo: div{ text-align:center; width:200px; height: 100px; background: #ccc; border: black solid 2px; box-shadow: 10px 10px 5px #888; }

Zero (0) é zero • Qualquer declaração de medida CSS igual a ZERO não deve ser seguida de unidade.

• Não se escreve 0 metros, 0 kilos, 0 litros, 0 pixel, 0 cm, pois ZERO é ZERO e não precisa ser expresso por uma unidade de medida.

• Portanto escreva: margin: 0 e não margin: 0px. fonte: http://www.maujor.com/tutorial/abreviacss.php 17/02/2013

Cores RGB (Red, Green and Blue) Color names and sRGB values

Named

Numeric

Color name

Hex rgb

Decimal

black

#000000

0,0,0

silver

#C0C0C0

192,192,192

gray

#808080

128,128,128

white

#FFFFFF

255,255,255

maroon

#800000

128,0,0

red

#FF0000

255,0,0

purple

#800080

128,0,128

fuchsia

#FF00FF

255,0,255

green

#008000

0,128,0

lime

#00FF00

0,255,0

olive

#808000

128,128,0

yellow

#FFFF00

255,255,0

navy

#000080

0,0,128

blue

#0000FF

0,0,255

teal

#008080

0,128,128

aqua

#00FFFF

0,255,255

fonte: http://www.w3.org/TR/css3-color/ 03/03/2013

Listas

Listas • O uso de listas é uma outra forma de mostrar informações.

• Em HTML temos listas ordenadas (sequenciais ou numeradas) e não-ordenadas.

• As listas ordenadas apresentam seus itens um após o outro, acompanhados de um número de sequência.

Listas ordenadas • O par de tags que define uma lista numerada é <ol></ol> e seus itens são definidos por <li></li>.

• Exemplo: <ol> <li>Abacaxi</li> <li>Maça</li> <li>Banana</li> </ol>

Listas não-ordenadas • O par de tags que define uma lista não-ordenada é <ul></ul> e seus itens são também definidos por <li></li>.

• Exemplo: <ul> <li>Abacaxi</li> <li>Maça</li> <li>Banana</li> </ul>

Listas + CSS • Podemos estilizar listas ordenadas (OL) com maiúsculo e minúsculo/alfabeto e algarismo romano com a propriedade list-style-type.

• Exemplo: list-style-type: upper-alpha; list-style-type: lower-roman; ...

Listas + CSS • Podemos estilizar listas não-ordenadas (UL) com a propriedade CSS list-style-type.

• Exemplo: list-style-type: square; list-style-type: circle; list-style-type: disc; ...

Listas + CSS • Para ambos tipos de lista é possível tirar o marcador.

• Exemplo: list-style-type: none;

Listas + CSS • Em listas não ordenadas (UL), é possível substituir os marcadores tradicionais por imagens através da propriedade de estilo: list-style-image: url("endereço-da-imagem");

Imagens

Imagens • Os formatos de imagens mais usados e aceitos pela WEB são: GIF, JPG e PNG. • Para exibir imagens é utilizada a tag órfã e inline: <img>: <img src="unoeste.png" alt="Logotipo da UNOESTE"/>

• Atributos: • src: é a URL do arquivo da imagem.

• alt: define um texto alternativo para a imagem mostrado quando a imagem não puder ser apresentada.

• height (altura) e width (largura): customizar o tamanho da imagem em pixels.

Imagens • Se não for especificada a altura e largura da imagem o navegador assume seu tamanho original.

• Ao especificar somente o atributo width não especificando height o navegador ajusta automaticamente a altura proporcionalmente à largura.

• Exemplo: <img src="unoeste.png" alt="Logotipo da UNOESTE" width="150px" />

Imagens + CSS > alinhamento horizontal • A propriedade margin definida para "0 auto" indica que as margens superiores e inferiores do seletor serão de 0; e as margens da direita e esquerda serão "automáticas", ou seja, o browser irá calcular o espaço que o seletor está ocupando e dividirá por 2, centralizando o elemento.

• Exemplo: .centraliza{width: 500px; margin: 0 auto; display: block;}

• Esta técnica por ser usada para centralizar uma página ou elementos HTML de bloco.

Imagens + CSS > alinhamento vertical • Alinhamento vertical de uma imagem em relação ao texto: vertical-align: modo-de-alinhamento; • Os valores para a propriedade são: • • • • • • •

•

top - o topo da imagem alinha com a linha top. text-top - O topo da imagem alinha com a linha text-top. baseline - Este é o alinhamento padrão. middle - O ponto médio da imagem alinha com a linha baseline. text-bottom - A parte inferior da imagem alinha com a linha text-bottom. bottom - A parte inferior da imagem alinha com a linha bottom. sub - A parte inferior da imagem alinha com a linha baseline do conteúdo subscrito (ainda que não haja subscrito no texto). super - A parte inferior da imagem alinha com a linha baseline do conteúdo sobrescrito (ainda que não haja sobrescrito no texto).

Imagens + CSS > outros alinhamentos • Consultar sobre posicionamento por Flutuação (final do material).

Imagens + CSS > background â&#x20AC;˘ Para definir uma imagem a ser usada como padrĂŁo de fundo usa-se a propriedade background-image: background-image: url(fipp.gif);

Imagens + CSS > background • Existe uma propriedade que permite definir como a imagem irá preencher o espaço do padrão de fundo: background-repeat.

• Possíveis valores: •

no-repeat: imagem não deve ser repetida.

•

repeat-x: para repetir a imagem no sentido horizontal do elemento HTML ao qual ela está associada.

•

repeat-y: para repetir a imagem no sentido vertical do documento, até atingir a margem sua margem inferior.

•

repeat: para repetir a imagem tanto horizontal como verticalmente, preenchendo toda a área de visualização do elemento.

• Se esta propriedade não for especificada, o browser adotará o valor default repeat.

Imagens + CSS > background > rolagem • É possível controlar se a imagem irá acompanhar a rolagem da tela ou permanecerá fixa através da propriedade background-attachment.

• Possíveis valores: •

Scroll: quando a imagem acompanha a rolagem da tela (padrão).

•

Fixed: quando a imagem não acompanha a rolagem da tela

Imagens + CSS > background > posição • É possível controlar a posição da imagem dentro do elemento HTML através da propriedade backgroundposition: background-position: coordenada-horizontal coordenada-vertical;

• Exemplo: os valores 30px 10px indicam que o canto superior esquerda da imagem deve estar a 30px da borda esquerda da área de visualização e a 10px da borda superior desta mesma área.

Links

Link • Os pares de tag <a> … </a> são utilizados para criar links ou para assinalar uma âncora. Entre estas tags pode colocar-se texto, mudanças de linha, imagens, cabeçalhos e outras tags.

• Atributos: • href=“recurso" - especifica o recurso a que se pretende fazer a ligação: arquivos, URLs, e-mail, etc.

• target: define a janela de abertura do link. Seus possíveis valores são: _blank, _parent, _self e _top.

• Exemplo: <a href="http://www.unoeste.br”>UNOESTE</a> <a href=“Pagina.html”><img src=“Figura.gif” alt=“imagem”/> </a>

Link • Continuação <a> … </a>: • Uma âncora é um ponto de referência dentro do documento HTML.

• O atributo name da tag <a> marca qual é ponto de referência: <a name =“NOME”> Texto </a> • O nome da âncora é escolhido por você.

• Depois basta fazer um link para o ponto de referência: <a href=“#NOME”> Clique Aqui</a> • O caractere # (+ nome da âncora) indica que o link é uma âncora.

Link + CSS • O Consórcio W3C criou algumas classes pré-definidas (pseudo-classes) que permite selecionar: um link, um link visitado, link não visitado, link ativo ou no estado hover (quando você passa o mouse sobre ele) • Estas pseudo-classes se aplicam ao seletor a:

• • • •

a:link – link não visitado; a:visited – link visitado; a:hover – mouse posicionado sobre o link; a:active – o link foi clicado;

Link + CSS â&#x20AC;˘ Exemplo: a:link {text-decoration: none} a:visited {text-decoration: none} a:hover {text-decoration: underline; color: #FF0000;} a:active {text-decoration: none}

Atividade 3:

Formatação

Tabelas

Tabelas • Uma tabela tem dois componentes: linhas e colunas.

• Na interseção desses componentes é que os dados ficam armazenados.

• Essa interseção é chamada de célula.

• As tabelas são estruturas poderosas da linguagem HTML. • Praticamente tudo o que é possível ter na seção body pode estar estruturado dentro das células de uma tabela.

Table • Uma tabela é identificada pelos pares de tags <table> e </table>.

• Cada linha de uma tabela, é identificada pelas tags <tr> e </tr>.

• Em cada linha são definidas células com as tags <td> e </td> • O procedimento para a criação de uma tabela implica a definição sequencial, da esquerda para a direita e de cima para baixo, do conteúdo de cada célula.

Table â&#x20AC;¢ Exemplo: <table> <tr> <td> CSS </td> <td> CSS </td> <td> CSS </td> </tr> <tr> <td> HTML </td> <td> HTML</td> <td> HTML </td> </tr> </table>

Table โ ข As tags <th> e </th> define um cabeรงalho para a tabela. <table> <tr> <th> Web </th> <th> Web </th> <th> Web </th> </tr> <tr> <td> CSS </td> <td> CSS </td> <td> CSS </td> </tr> <tr> <td> HTML </td> <td> HTML</td> <td> HTML </td> </tr> </table>

Table â&#x20AC;¢ As tags <caption> e </caption> define uma legenda para a tabela. <table> <caption>CSS & XHTML</caption> <tr> <th> Web </th> <th> Web </th> <th> Web </th> </tr> ...

Table • Para organizar melhor as linhas das tabelas, podem ser usados outros 3 elementos: • <thead> cabeçalho da tabela • <tfoot> rodapé da tabela • <tbody> corpo da tabela

• As tags <thead> e <tfoot> devem aparecer na parte inicial da definição da tabela • Uma tabela só pode ter uma tag <thead> e <tfoot>, mas quantas tags <tbody> forem necessárias.

• Cada elemento deve conter pelo menos uma linha (<tr>)

Table โ ข Exemplo: <table> <caption> Lista de Notas </caption> <thead> <tr> <th> Aluno </th> <th> Nota </th> </tr> </thead> <tfoot> <tr> <td> 1ยบ Bimestre </td> <td> Setembro/2010 </td> </tr> </tfoot> <tbody> <tr> <td> Maria </td> <td> 8.0 </td> </tr> </tbody> </table>

Table • As tabelas podem também ser flexíveis, utilizando um processo conhecido como spanning para melhor apresentação dos dados.

• O spanning permite que uma única célula ocupe mais espaço do que outra célula na mesma linha ou coluna.

Table > colspan • O atributo colspan é usado na tag <td> para indicar quantas colunas estarão contidas em uma célula.

• Exemplo: <table border="1"> <tr> <td colspan="3">Célula 1</td> </tr> <tr> <td>Célula 2</td> <td>Célula 3</td> <td>Célula 4</td> </tr> </table>

Table > rowspan • O atributo rowspan também é usado na tag <td> para indicar quantas linhas estarão contidas em uma célula.

• Exemplo: <table border="1"> <tr> <td rowspan="3">Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula 3</td> </tr> <tr> <td>Célula 4</td> </tr> </table>

Table + CSS • Bordas (vide slides sobre bordas) • Por padrão, as bordas da células são espaçadas. A prop. CSS border-colapse configura o comportamento do espaçamento das células:

border-collapse: collapse;

Table + CSS • Efeito zebrado: table tbody tr:nth-child(2n+1) { background: lightgray; }

• Com os valores odd ou even, é possível selecionar os elementos de posição ímpar ou par. table tbody tr:nth-child(odd) { background: lightgray; }

• Efeito hover: table tbody tr:hover { background: yellow; }

Atividade 4:

Tabelas

Formulรกrios

Formulários • Formulários são usados como forma de se obter informações dos usuários de páginas web.

• São mecanismos comuns e amplamente usados na coleta de informações.

• Um formulário é composto por vários elementos de diferentes tipos que permitem a entrada de dados.

Formulários • Para definirmos um formulário usamos os pares de tags <form> e </form>. Todos os elementos membros do formulário devem estar delimitados pelas tags.

• A tag <form> apresenta três atributos: • name: nome do formulário.

• action: endereço web para onde serão enviados os dados do formulário.

• method: o método HTTP (post ou get) que será usado no envio dos dados.

Formulรกrios <form name="cadastro" action="pagina.aspx" method="post"> <!-- Elementos do Formulรกrio --> </form>

Formulários • Podemos usar para a entrada de dados caixas de texto, botões, caixas de seleção e até mesmo campos ocultos.

• Para fazermos a entrada de dados em um formulário podemos usar as tags: • input • select • textarea

Formulários > input • A tag <input> é a mais utilizada dentro de formulários. O tipo de entrada que a tag representa depende do seu atributo type: • text: dados do tipo caractere.

• password: igual ao text, mas o texto digitado não é mostrado em tela.

• hidden: permite o armazenamento e envio de dados sem que eles fiquem visíveis no navegador do usuário (ocultos).

• checkbox: caixas de seleção, aceitam a seleção de várias opções.

• radio: botão de opção, aceita apenas a seleção de uma opção.

Formulários > input • button: botão simples que pode ser vinculado a eventos.

• reset: botão que, após ser acionado, volta o formulário ao seu estado inicial (limpa os campos).

• submit: botão que, ao ser acionado, envia os dados do formulário para o endereço definido no action do <form>.

Formulários > input • Exemplos: • <input type="text" name="txtNome" size="40" maxlength="30" value="Digite seu nome" /> • <input type="password" name="txtSenha" size="20" maxlength="15" value="" /> • <input type="hidden" name="hCodigo" value="1" />

Formulários > input • Exemplos: • <input type="checkbox" id="iCampo" value="10" checked="checked" /> Opção 1

• <input type="radio" id="iRadio" value="1" checked="checked" /> Opção 1

Formulários > input HTML5 • search: define um input para busca.

• tel: define um input para telefone, e seu formato é independente de região.

• url: define um input a entrada de URL absoluta.

• email: define um input entrada de e-mail.

• date, time, datetime e datetime-local: definem um input customizado para entrada de data, hora, e data e hora.

Formulários > input HTML5 • month e week: definem um input customizado para seleção de um mês e uma semana respectivamente.

• number: define um input para entrada de número.

• range: define um input para entrada de número contido num intervalo. Os atributos min e max determina o valor mínimo e máximo do intervalo, já o atributo step indica de quanto será o incremento.

• color: define um input para receber um valor RGB.

Formulários > input > Atributos HTML5 • placeholder: define um texto estilo marca-da-água em elementos inputs e textarea. <input type="text" placeholder="Digite aqui seu nome" />

• autofocus: define qual elemento do formulário receberá o foco logo que a página ser carregada.

Aplicado na maioria dos elementos do formulário. <input type="text" id="nome" autofocus=“autofocus" />

Formulários > input > Atributos HTML5 • required: define um elemento input, select ou textarea como requerido. <input type="text" id="nome" required="required" />

• pattern: valida o valor do input text usando uma expressão regular: <input type="text" pattern="\d{5}-?\d{3}" title="99999-999" />

Formulários > input > Atributos HTML5 • list: define uma lista de sugestões para inputs (combinado com a tag <datalist>). <input id="lanche" type="text" list="dlLanches" /> <datalist id="dlLanches"> <option value="X-Frango"></option> <option value="X-Salada"></option> <option value="X-Egg"></option> <option value="BigMac Pirata"></option> </datalist>

Formulários > select • Caixa de seleção.

• Cada opção da lista é definido através de uma tag <option>.

• Quando desejamos que uma opção já esteja selecionada, usamos o atributo selected da tag <option>. <select name="selOpcao" > <option value="1" selected="selected"> Opção1 </option> <option value="2"> Opção2 </option> <option value="3"> Opção3 </option> </select>

Formulários > textarea • A tag <textarea> insere no formulário uma caixa de texto de múltiplas linhas.

• O número de linhas é especificado pelo atributo rows e o número de colunas (caracteres por linha) pelo atributo cols.

• Para inicializar o conteúdo do textarea, colocamos o texto entre a tag de abertura e a de fechamento. <textarea rows="5" cols="20"> Testando um campo texto... </textarea>

Formulรกrios + CSS โ ข Estilizando formulรกrios: input[type=text], input[type=password], input[type=file], select, textarea { border-bottom: #D5D8EA 1px solid; border-left: #D5D8EA 1px solid; border-top: #D5D8EA 1px solid; border-right: #D5D8EA 1px solid; margin: 0px; padding-left: 3px; padding-right: 3px; font: 13px "Lucida Grande" , Arial, Sans-serif; background: #FFFFFF; color: #000000; padding-bottom: 3px; padding-top: 3px; }

Atividade 5:

Formulรกrios

Pseudo classes CSS

Pseudo classes • Pseudo classes são seletores que especificam um estado de um elemento ou uma relação ao seletor.

1. Elemento ativo (estado) 2. Elemento sem conteúdo (estado) 3. Primeiro filho (relação)

• seletor:pseudo classe {Propriedade: valor;}

Pseudo classes • :link – link não visitado; • :visited – link visitado; • :hover – mouse posicionado sobre um elemento; • :focus – elemento realçado; • :first-child – elemento que é o primeiro filho de outro elemento;

Pseudo classes + CSS3 • :nth-child() • :last-child • :empty • :not() • :enabled • :disabled • :checked

TĂŠcnicas para layouts modernos

Tableless • É uma metodologia que abre mão das tabelas HTML para fazer a construção do layout do site em CSS, através do uso do elemento DIV. • A partir da HTML5 a tag DIV deve ser trocadas por tags semânticas como header, section, footer, etc.

Elementos de layout • Usando os elementos de nível de blocos div ou header, section, footer, etc: • É possível definir via CSS o formato estético de cada um destes blocos.

• É possível definir o posicionamento em qualquer ponto da tela; • É possível empilhar estes blocos.

• Podem comportar qualquer conteúdo HTML, inclusive outros blocos.

Elementos inline e de bloco • Os elementos HTML inline somente ocupam a largura necessária e não criam linhas antes e depois de si.

• Elementos de bloco utilizam toda a sua largura disponível (configurável) de seu container, e criam uma linha invisível antes e depois de si próprio

Definindo tamanho e posicionamento dos blocos • As propriedades CSS top, left, bottom e right permitem indicar o posicionamento do elemento.

• E width e height definem a dimensão do elemento.

• O atributo z-index define a ordem de empilhamento (visualização) dos elementos da página, sendo sempre do menor para o maior.

Definindo tamanho e posicionamento dos blocos • Na CSS podemos posicionar elementos de bloco por meio do atributo position: • Possívels valores: absolute, relative, fixed e static.

• static: é o valor padrão, e indica que o posicionamento do elemento não foi modificado e seguirá o fluxo normal.

Definindo tamanho e posicionamento dos blocos • fixed: determina que o elemento deve ficar fixo (em relação a janela) na posição que você mandar, e quando a barra de rolagem é movida, este elemento fica fixado na posição que você definiu. #divFixed { background-color: blue; position: fixed; width: 300px; height: 300px; top: 100px; left: 500px; }

Definindo tamanho e posicionamento dos blocos • relative: determina que o elemento deve ficar posicionado de acordo com / relativo a sua posição original no fluxo normal.

• Ao usar top, left, rigth e bottom o deslocamento acontece a partir de sua posição no fluxo.

• Se o elemento é renderizado em fluxo normal na posição 100 x 100, e você colocar estilo left igual a 30 pixels e top igual a 50 pixels, o elemento vai ser posicionado com 130 pixels para esquerda (left) e 150 pixels do topo (top) a partir da sua origem no fluxo.

Definindo tamanho e posicionamento dos blocos • Exemplo Relative: #divRelative { background-color: green; position: relative; top: 50px; left: 50px; width: 300px; height: 300px; }

• O elemento é posicionando considerando sua posição no fluxo normal. Ao usar top, left, rigth e bottom o deslocamento acontece a partir de sua posição no fluxo.

Definindo tamanho e posicionamento dos blocos • absolute: determina que o elemento deve ficar na posição que você mandar.

• O local especificado para o elemento é em relação ao seu elemento pai mais próximo que esteja em posição relative ou absolute. Se não houver um pai com posição relative ou absolute, o elemento ficará posicionado em relação a janela.

Definindo tamanho e posicionamento dos blocos • Exemplo Absolute: #divAbsolute { position: absolute; width: 300px; height: 300px; top: 0px; left: 0; }

• O pai de um elemento absoluto deve ser um elemento também deve ser um elemento posicionado, caso contrário ele será posicionado em relação a página

Flutuando blocos • A CSS disponibiliza uma outra propriedade capaz de mudar o posicionamento padrão de elementos de nível de bloco: float.

• Pode ser usada para posicionar uma imagem ao lado de um bloco de texto, como também construir layouts.

• Possíveis valores: left e right. Posicionam os elementos à esquerda ou à direita de seu container sem quebrar a linha, e os outros elementos vão contorná-lo.

Flutuando blocos • Exemplo 1: Dois elementos de bloco com comportamento padrão (um abaixo do outro conforme o padrão de nível de blocos).

Flutuando blocos • A propriedade float permite que um elemento de nível de bloco não quebre a linha no final.

• O comportamento é de flutuação.

• O bloco pode ser colocado a esquerda/direita e o restante vai lhe contornar.

Flutuando blocos â&#x20AC;˘ Exemplo - Flutuando somente um elemento:

#divVerde { width: 200px; height: 200px; background-color: green; float: left; }

#divAzul { width: 500px; height: 400px; background-color: blue; }

Flutuando blocos â&#x20AC;˘ Exemplo - Flutuando os dois elementos:

#divVerde { width: 200px; height: 200px; background-color: green; float: left; }

#divAzul { width: 500px; height: 400px; background-color: blue; float: left; }

Flutuando blocos • O elemento que flutua não força automaticamente a altura do elemento container, ou seja, a altura do elemento container não acompanha a altura do elemento com float.

• O elemento que está flutuando deixa de considerar o elemento container como pai.

Flutuando blocos – limpando • O problema citado anteriormente pode ser resolvido com o uso da propriedade clear.

• Provoca uma quebra na flutuação fazendo com que o elemento com a propriedade clear aparecerá depois do elemento flutuantes, ignorando o float.

.clearfix { clear: both; }

Layout em XHTML 1 <div> Topo

Título do conteúdo <div> Menu

<div> Texto do conteúdo

<div> Tags e links para outros textos <div> Rodapé do conteúdo <div> Rodapé da página

Layout em HTML 5 â&#x20AC;&#x201C; Exemplo 1 <header>

<section> <header>

<nav>

<article>

<aside>

<footer> <footer>

Layout em HTML 5 â&#x20AC;&#x201C; Exemplo 2 <header> <aside>

<nav>

<article>

<section> <footer>

Layout em HTML 5 â&#x20AC;&#x201C; Exemplo 3 <header> <aside> <nav>

<article> <article> <aside>

<footer>

<article>

Layout em HTML 5 â&#x20AC;&#x201C; Exemplo 4 <header> <nav>

<article>

<article> <footer>

<article>

Layout em HTML5 â&#x20AC;&#x201C; Convertendo... header nav article ou nav

article

aside

footer

Layout em HTML5 â&#x20AC;&#x201C; Convertendo...

Layout em HTML5 â&#x20AC;&#x201C; Convertendo...

Menu CSS com listas • É possível usar listas HTML estilizadas como menus de navegação.

• Os itens do menu aparecem quando o usuário para o mouse em cima dos elementos da lista.

Layout responsive • Um site com layout responsivo é um site preparado para “ficar bem” em qualquer dispositivo.

• Computador, televisão, geladeira, torradeira, etc…

tablet,

smartphone,

Não responsivo (site miniaturizado)

Responsivo (o layout é adequado ao tamanho da tela)

Layout responsive â&#x20AC;¢ VIEWPORT

fonte: http://msdn.microsoft.com/pt-br/magazine/jj133814.aspx

Layout responsive • Uma página preparada para dispositivos com telas de tamanhos diferentes deve possuir a META tag viewport no seu head: <meta name="viewport" content="width=device-width" /> • A propriedade width com o valor device-width, diz ao navegador para não renderizar a página de forma miniaturizada.

Layout responsive • Outras propriedades Propriedade width

Descrição Indica a largura desejada do visor em pixels independentes do dispositivo. Pode ser um número explícito (por exemplo, 240) ou, melhor ainda, um valor relativo como device-width.

height

Indica a altura do visor desejada em pixels independentes do dispositivo. Pode ser um número explícito (por exemplo, 320) ou, melhor ainda, um valor relativo como device-height.

initial-scale

Indica o nível de zoom desejado quando a página é inicialmente carregada. Um valor de 1 indica que a página deve ser renderizada com seu tamanho natural, totalmente sem zoom. Um valor de 2 dobrará o tamanho da página e assim por diante. Valores decimais também podem ser usados, como “1.0.”

minimumscale

Indica o nível mínimo de zoom permitido para a página. Um valor de 1 indica que o usuário não pode aplicar o zoom para reduzir a página mais do que seu tamanho natural.

Indica o nível máximo de zoom permitido para a página. O valor máximo é 10.0

maximumscale user-scalable Uma propriedade yes/no que indica se o usuário tem permissão de aplicar zoom à página.

Layout responsive • Media Queries é um recurso da CSS 3 que fornece maneiras de verificar qual o dispositivo, como também verificar a largura e altura no navegador, orientação, resolução, etc...

• É através de Media Queries que podemos modificar nosso layout para ficar adequado ao tamanho da tela do dispositivo em que o será visualizado.

Layout responsive â&#x20AC;˘ Exemplo â&#x20AC;&#x201C; HTML: <div id="corpo"> <div id="barra-esquerda">parte 1</div>

<div id="conteudo">parte 2 parte 2 parte 2 parte 2 parte 2.</div> <div id="barra-direita">parte 3</div> </div>

Layout responsive (responsivo) • Exemplo – CSS: /* CSS padrão - preparado para telas com 1024 de largura ou mais*/ * {margin: 0; padding: 0;} body {font-size: 12px;} #corpo {width: 960px; margin: 0 auto; } #barra-esquerda {width: 20%; min-height: 100px; background-color: Aqua; float: left; } #conteudo {width: 60%; min-height: 100px; background-color: Yellow; float: left; } #barra-direita {width: 20%; min-height: 100px; background-color: Aqua; float: left;} /*Media Querie 1: Para adequação do layout em telas menores que 900px de largura */ @media screen and (max-width: 900px) { #corpo {width: 100%; } #barra-esquerda, #conteudo, #barra-direita {width: 100%; float: none; margin: 0; }

} /*Media Querie 2: Para adequação do layout em telas menores que 400px de largura */ @media screen and (max-width: 400px) { #barra-esquerda {display: none; } /*Escondendo a barra lateral da esquerda*/ }

Atividade 6:

Desenvolvimento de layout

Canvas (HTML5) • <canvas> … </canvas>: fornece uma maneira de desenhar dinamicamente imagens. <canvas id="areacanvas" width="838" height="220"></canvas> <script> var canvasContext = document.getElementById("areacanvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1 / 2, Math.PI * 3 / 2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke(); </script>

Referências • Manzano, José Augusto N. G.; Toledo, Suely Alves de, Guia de orientação e desenvolvimento de sites HTML, XHTML, CSS e JavaScript/JScript. Editora(s) Érica • HTML 5 - A linguagem de marcação que revolucionou a Web, Maurício Samy Silva, Editora Novatec.

• http://dev.w3.org/html5/spec/single-page.html • http://www.w3.org/TR/html5-diff/ • http://www.w3schools.com/html5/default.asp • http://html5test.com/ • http://slides.html5rocks.com/#landing-slide • http://www.maujor.com/ • Smashing CSS – Técnicas Profissionais para um Layout Moderno. Editora Bookman.

• A arte e a ciência da CSS – Crie Web Designs inspiradores baseados em padrões.

Editora Bookman.

• HTML 5 – Embarque imediato. Fábio Flatschart. Editora Brasport

Autores • Professor André Menegassi andremenegassi@unoeste.br; andremenegassi.com.br

• Professora Cristiane Maciel Rizo cris@unoeste.br

• Professor Mario Augusto Pazoti mario@unoeste.br