programação web aula 2 xhtml/css/xml - inf.ufpr.br · action será visto na parte deste curso que...

Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets

Programação WebAula 2

XHTML/CSS/XML

Bruno Müller Junior

Departamento de Informática

UFPR

17 de Fevereiro de 2014

Bruno Müller Junior Departamento de Informática UFPR

Programação Web Aula 2 XHTML/CSS/XML


1 Histórico2 Funcionamento3 Atributos4 HTML5

Estrutura de uma arquivo HTML5ValidaçãoTags básicas

Seleção de metadados: <meta>Markup básico: <p> ... </p> e <h1> ... </h1>Imagens: <img ... >Links: <a href ... >Listas: <ol>, <ul>, <li>Tabelas: <table>Entrada de dados: <form>GET x POSTEntrada de dados: tags mais comuns

5 CSS - Castading Style SheetsFormato de especi�cação de estiloExemploFormatos de Seletores




Histórico

HTML ⊂ SGML (Standard Generalized Markup Language)

XML ⊂ SGMLOrigem: CERN

Popularização: navegador Mosaic (1993)Primeira Grande Guerra: IE x Netscape (Versões �próprias� doHTML;Padronização: W3C (http://www.w3.org/Versão AnoHTML 2.0 1995HTML 3.2 1997 �m da guerraHTML 4.01 1999XHTML 1.0 2000 HTML 4.01 em XMLXHTML 1.1 2001HTML 5.0 2011 �padrão� atual



http://www.w3.org/


Funcionamento

O ponto central do uso de HTML é o uso de TAGS. Exemplode TAG:<TAG [atributos]> conteúdo </TAG>

Ao receber um documento HTML, um navegador analisa ostags contidos no documento.

Se reconhecer o tag, renderiza a tag, se não reconhecer, ignora.

Exemplo: Parágrafo1

sintaxe básica: <p> ... </p>

1http://www.w3schools.com/tags/tag_p.asp



http://www.w3schools.com/tags/tag_p.asp


Atributos

Atributos Globais2: Valem para quase todos os tags;<p id=�paragrafo1�> conteúdo </p>

Atributos locais: valem somente para uma tag especí�ca.

2http://www.w3schools.com/tags/ref_standardattributes.asp



http://www.w3schools.com/tags/ref_standardattributes.asp


HTML5

Estrutura de uma arquivo HTML5

Validação

Tags básicas

Seleção de metadados (<meta>)Markup básico: <p>, <h1>, <h2> ...Imagens: <img ... >Links: <a href ... >Listas: <ol>, <ul>, <li>Tabelas: <table>Entrada de dados: <form>






Exemplo de um arquivo HTML5 mínimo3.<!DOCTYPE html><html><head><title>Título do documento</title></head>

<body>Conteúdo do documento......</body>

</html>

3http://www.w3schools.com/html/html5_intro.asp



http://www.w3schools.com/html/html5_intro.asp


Validação

Validação

A W3C mantém um site que valida páginas emhttp://validator.w3.org/

Use com gosto.



http://validator.w3.org/


Tags básicas

Tags básicas

O conjunto de tags é muito grande, e inviável de ser apresentado.Sendo assim, o conjunto foi dividido em grupos, sendo que somentealguns de cada grupo serão apresentados.

Seleção de metadados: <meta>

Markup básico: <p> ... </p> e <h1> ... </h1>

Imagens: <img ... >

Links: <a href ... >

Listas: <ol>, <ul>, <li>

Tabelas: <table>

Entrada de dados: <form>






o tag <meta> fornece informações sobre o documento quenão são mostrados, mas que podem ser utilizados embuscadores4;Exemplo:<head><meta name="aula" content="Programação Web"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta name="author" content="Bruno Müller Junior"><meta charset="UTF-8"></head>

4http://www.w3schools.com/tags/tag_meta.asp



http://www.w3schools.com/tags/tag_meta.asp

Exemplo5:<!DOCTYPE html><html><head><meta charset="utf-8"><title>Exemplo de uso dos tags <p> e <h1> </title></head><body><h1> Este é um cabeçalho de nível 1 </h1><h2> Este é um cabeçalho de nível 2 </h2><p style="color:green">Este é um parágrafoem cor verde.</p> <p style="color:blue">Este é um parágrafo

em cor azul.</p>

</body></html>

5http://www.inf.ufpr.br/bmuller/CI320/2/exemploP.html



http://www.inf.ufpr.br/bmuller/CI320/2/exemploP.html


Imagens: <img ... >

Imagens: <img ... >

Principais tipos de Imagens usados:

GIF Cores de 8 bits (256 cores), qualidade �baixa�.Permite transperência;

JPG/JPEG Cores de 24 bits (16 milhões de cores), qualidade�alta�. Normalmente gera arquivos menores queo GIF.

PNG versão livre do GIF, que permite transparência eo mesmo número de cores do JPG. Porém, osarquivos são um pouco maiores do que JPEG.

Uso: <img src=�....�, alt=�...� />

http://www.w3schools.com/tags/tag_img.asp



http://www.w3schools.com/tags/tag_img.asp




O tag <a> (anchor) é usado para acessar outra página(link),ou outra parte da mesma página.

O atributo mais comum é o href:

Para referenciar uma página �externa�: <ahref="http://www.w3schools.com�Visit

W3Schools.com!</a>Para referenciar uma parte da própria página:

Criar um ponto de destino: <h2 id="destino� Destino

</h2>

Referência: <a

href="http://www.inf.ufpr.br/bmuller/CI320/exemploA.html#destino�Link

Externo</a>6

6http://www.inf.ufpr.br/bmuller/CI320/2/exemploA.html



http://www.inf.ufpr.br/bmuller/CI320/2/exemploA.html




Listas não ordenadas (<ul> ... <li> ... </ul>)

Listas ordenadas (<ol> ... <li> ...</ul>)

Listas de de�nição (<dl> ... <dt> ... <dd> ...</dl>)

Exemplo de uso:http://www.inf.ufpr.br/bmuller/CI320/2/exemploL.html:



http://www.inf.ufpr.br/bmuller/CI320/2/exemploL.html


Tabelas: <table>

Tabelas: <table>

... </table>

cabeçalhos: <th> .. <th>

linha: <tr> ... <tr>

elemento: <td> ... <td>

Atributos:

rowspan, colspan (agregar linhas ou colunas)

Exemplo de uso:http://www.inf.ufpr.br/bmuller/CI320/2/exemploT.html:



http://www.inf.ufpr.br/bmuller/CI320/2/exemploT.html




Para o usuário preencher dados e mandá-los ao servidor,normalmente usa-se o tag <form>;

Este tag permite vários tipos de interação: digitação, seleçãoem menu, seleção de opções, entre muitos outros.

Dentre os atributos deste tag, destacam-se:

action indica a url da aplicação que deve ser chamadaquando o usuário clica no botão submit.

get os dados de entrada são anexados à url (algunsservidores podem por limites no tamanho da url;

post os dados de entrada são enviados no corpo damensagem.

Exemplo: http://www.w3schools.com/tags/tag_form.asp



http://www.w3schools.com/tags/tag_form.asp


GET x POST

GET x POST

Ao clicar no botão �submit�, o navegador envia os dados doformulário para o servidor;

A url da aplicação que irá tratar os dados contidos noformulário é indicada pelo atributo action.

O protocolo HTTP permite duas formas de enviar os dados,usando o método GET e o método POST.

Para decidir qual método usar, em especial para envio desenhas, leiahttp://www.w3schools.com/tags/ref_httpmethods.asp.

A implementação de aplicativos indicado na url do atributoaction será visto na parte deste curso que lida com os servidores(em especial, servlets e Rails).



http://www.w3schools.com/tags/ref_httpmethods.asp


Entrada de dados: tags mais comuns

Entrada de dados: tags mais comuns

<input> http://www.w3schools.com/tags/tag_input.asp

<tag_select> http://www.w3schools.com/tags/tag_select.asp

<textarea> http://www.w3schools.com/tags/tag_textarea.asp

<tag_button> http://www.w3schools.com/tags/tag_button.asp



http://www.w3schools.com/tags/tag_input.asp

http://www.w3schools.com/tags/tag_select.asp

http://www.w3schools.com/tags/tag_textarea.asp

http://www.w3schools.com/tags/tag_button.asp


CSS - Castading Style Sheets

Cada tag (e documento) tem um conjunto de atributos.Alguns deles correspondem a efeitos visuais. Exemplos incluemcolor, text-align, font-family, font-size, etc.

Estes atributos são normalmente chamados de atributos de�estilo�.

A grande maioria destes atributos tem um valor padrão.

O CSS é um mecanismo para modi�car este valor (ou seja, oestilo).

Níveis de modi�cadores:

inline: aplica-se a um único elemento;document level : aplica-se a um documento inteiro;external : aplica-se a um conjunto de documentos.




Formato de especi�cação de estilo

Formato de especi�cação de estilo

Tag <style>....<style>Regra_1Regra_2...Regra_n<\style>...

Formato da especi�cação de uma regra:seletor {propriedade_1:valor_1;

propriedade_2: valor_2;...propriedade_n: valor_n;

}




Exemplo

Exemplo

<!DOCTYPE html><html><head><style>

body {background-color:#d0e4fe;

}h1 {

color:orange;text-align:center;

}p {

font-family:"Times New Roman";font-size:20px;

}</style></head><body>

...</body>

</html>

Exemplo Prático: http://www.w3schools.com/css/



http://www.w3schools.com/css/


Formatos de Seletores


Seletores Simples Aplicam-se a um elemento.h1 {font-size: 24pt;}h2, h3 {font-size: 20pt;}

Seletores de Classes Aplicam-se tags iguais com atributos classcom o mesmo nome.p.normal { lista de valores de propriedade }p.warning { lista de valores de propriedade }...<p class="normal">

Parágrafo com formatação "normal"</p><p class="warning">

Parágrafo com formatação "warning"</p>






Seletores Genéricos Aplicam-se a atributos class, mesmo em tagsdiferentes..vendas { lista de valores de propriedade }...<p class="vendas"> Parágrafo com formatação "vendas" </p><h3 class="vendas"> h3 com formatação "warning" </h3>

Seletores de id Aplicam-se a atributos id com o mesmo nome.#compras { lista de valores de propriedade }...<p id="compras"> Parágrafo com formatação "compras" </p><h3 id="compras"> h3 com formatação "compras" </h3>

Seletores Universais Aplicam-se a todos os elementos dodocumento.* {color:red}






Pseudo Classes Estilos que só são aplicados quando alguma açãoacontece e não simplesmente porque a classe existe.Exemplos:

hover quando o mouse passa sobre o objeto.focus quando o usuário clica no objeto.

Exemplo:http://www.inf.ufpr.br/bmuller/CI320/2/exemploPS.html



http://www.inf.ufpr.br/bmuller/CI320/2/exemploPS.html


Estudos

Estudos

O CSS inclui muitos tipos de propriedades divididos em categorias.Sugerimos estudar pelo menos os seguintes:

Fontes http://www.w3schools.com/css/css_font.asp

Listas http://www.w3schools.com/css/css_list.asp

Texto http://www.w3schools.com/css/css_text.asp

Tabelas http://www.w3schools.com/css/css_table.asp

Além destes, é fortemente recomendado estudar como



http://www.w3schools.com/css/css_font.asp

http://www.w3schools.com/css/css_list.asp

http://www.w3schools.com/css/css_text.asp

http://www.w3schools.com/css/css_table.asp


The Box Model

The Box Model

Quando se está criando uma página, é necessário entender quandoos objetos se interceptam, e como. Isto é possível estudando o �boxmodel� de CSS.

Cada objeto HTML é �emoldurado� em uma caixa (box);

Cada (box) é composta por:

margens;bordas;padding (plataforma?)conteúdo.

mais fácil ver isto na prática:http://www.w3schools.com/css/css_boxmodel.asp



http://www.w3schools.com/css/css_boxmodel.asp

programação web aula 2 xhtml/css/xml - inf.ufpr.br · action será visto na parte deste curso que...

Documents