Post on 06-Oct-2018
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
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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>
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
Estrutura de uma arquivo HTML5
Estrutura de uma arquivo HTML5
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
Validação
Validação
A W3C mantém um site que valida páginas emhttp://validator.w3.org/
Use com gosto.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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>
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
Seleção de metadados: <meta>
Seleção de metadados: <meta>
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
Markup básico: <p> ... </p> e <h1> ... </h1>
Markup básico: <p> ... </p> e <h1> ... </h1>
Exemplo5:<!DOCTYPE html><html><head><meta charset="utf-8"><title>Exemplo de uso dos tags <p> e <h1> </title></head><!-- Este é um comentário
de várias linhas --><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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
Links: <a href ... >
Links: <a href ... >
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
Listas: <ol>, <ul>, <li>
Listas: <ol>, <ul>, <li>
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:
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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:
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
Entrada de dados: <form>
Entrada de dados: <form>
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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).
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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.
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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;
}
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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/
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
Formatos de Seletores
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>
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
Formatos de Seletores
Formatos de Seletores
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}
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
Formatos de Seletores
Formatos de Seletores
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML
Histórico Funcionamento Atributos HTML5 CSS - Castading Style Sheets
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
Bruno Müller Junior Departamento de Informática UFPR
Programação Web Aula 2 XHTML/CSS/XML