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

Tamanho: px

Começar a partir da página:

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

Milena Pereira Beltrão
6 Há anos
Visualizações:

1 Programação Web Aula 2 XHTML/CSS/XML Departamento de Informática UFPR 17 de Fevereiro de 2014

2 1 Histórico 2 Funcionamento 3 Atributos 4 HTML5 Estrutura de uma arquivo HTML5 Validação Tags 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 POST Entrada de dados: tags mais comuns 5 CSS - Castading Style Sheets Formato de especicação de estilo Exemplo

3 Histórico HTML SGML (Standard Generalized Markup Language) XML SGML Origem: CERN Popularização: navegador Mosaic (1993) Primeira Grande Guerra: IE x Netscape (Versões próprias do HTML; Padronização: W3C ( Versão Ano HTML HTML m da guerra HTML XHTML HTML 4.01 em XML XHTML HTML padrão atual

4 Funcionamento O ponto central do uso de HTML é o uso de TAGS. Exemplo de TAG: <TAG [atributos]> conteúdo </TAG> Ao receber um documento HTML, um navegador analisa os tags contidos no documento. Se reconhecer o tag, renderiza a tag, se não reconhecer, ignora. Exemplo: Parágrafo 1 sintaxe básica: <p>... </p> 1

5 Atributos Atributos Globais 2 : Valem para quase todos os tags; <p id=paragrafo1> conteúdo </p> Atributos locais: valem somente para uma tag especíca. 2

6 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>

7 Estrutura de uma arquivo HTML5 Estrutura de uma arquivo HTML5 Exemplo de um arquivo HTML5 mínimo 3. <!DOCTYPE html> <html> <head> <title>título do documento</title> </head> <body> Conteúdo do documento... </body> </html> 3

8 Validação Validação A W3C mantém um site que valida páginas em Use com gosto.

9 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 somente alguns 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>

10 Seleção de metadados: <meta> Seleção de metadados: <meta> o tag <meta> fornece informações sobre o documento que não são mostrados, mas que podem ser utilizados em buscadores 4 ; Exemplo: <head> <meta name="aula" content="programação Web"> <meta name="keywords" content="html,css,xml,javascript"> <meta name="author" content=""> <meta charset="utf-8"> </head> 4

11 Markup básico: <p>... </p> e <h1>... </h1> Markup básico: <p>... </p> e <h1>... </h1> Exemplo 5 : <!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ágrafo em cor verde.</p> <p style="color:blue">este é um parágrafo em cor azul.</p> </body> </html> 5

12 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 que o GIF. PNG versão livre do GIF, que permite transparência e o mesmo número de cores do JPG. Porém, os arquivos são um pouco maiores do que JPEG. Uso: <img src=..., alt=... />

13 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: <a href=" 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=" Externo</a> 6 6

14 Listas: <ol>, <ul>, <li> Listas: <ol>, <ul>, <li> Listas não ordenadas (<ul>... <li>... </ul>) Listas ordenadas (<ol>... <li>...</ul>) Listas de denição (<dl>... <dt>... <dd>...</dl>) Exemplo de uso:

15 Tabelas: <table> Tabelas: <table> cabeçalhos: <th>.. <th> linha: <tr>... <tr> elemento: <td>... <td> Atributos: rowspan, colspan (agregar linhas ou colunas) Exemplo de uso:

16 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ção em 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 chamada quando o usuário clica no botão submit. get os dados de entrada são anexados à url (alguns servidores podem por limites no tamanho da url; post os dados de entrada são enviados no corpo da mensagem. Exemplo:

17 GET x POST GET x POST Ao clicar no botão submit, o navegador envia os dados do formulário para o servidor; A url da aplicação que irá tratar os dados contidos no formulá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 de senhas, leia A implementação de aplicativos indicado na url do atributo action será visto na parte deste curso que lida com os servidores (em especial, servlets e Rails).

18 Entrada de dados: tags mais comuns Entrada de dados: tags mais comuns <input> <tag_select> <textarea> <tag_button>

19 CSS - Castading Style Sheets Cada tag (e documento) tem um conjunto de atributos. Alguns deles correspondem a efeitos visuais. Exemplos incluem color, 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 modicar este valor (ou seja, o estilo). Níveis de modicadores: inline: aplica-se a um único elemento; document level : aplica-se a um documento inteiro; external: aplica-se a um conjunto de documentos.

20 Formato de especicação de estilo Formato de especicação de estilo Tag <style>... <style> Regra_1 Regra_2... Regra_n <\style>... Formato da especicação de uma regra: seletor {propriedade_1:valor_1; propriedade_2: valor_2;... propriedade_n: valor_n; }

21 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:

22 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 class com 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>

23 Formatos de Seletores Formatos de Seletores Seletores Genéricos Aplicam-se a atributos class, mesmo em tags diferentes..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 do documento. * {color:red}

24 Formatos de Seletores Formatos de Seletores Pseudo Classes Estilos que só são aplicados quando alguma ação acontece e não simplesmente porque a classe existe. Exemplos: Exemplo: hover quando o mouse passa sobre o objeto. focus quando o usuário clica no objeto.

25 Estudos Estudos O CSS inclui muitos tipos de propriedades divididos em categorias. Sugerimos estudar pelo menos os seguintes: Fontes Listas Texto Tabelas Além destes, é fortemente recomendado estudar como

26 The Box Model The Box Model Quando se está criando uma página, é necessário entender quando os objetos se interceptam, e como. Isto é possível estudando o box model 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:

Documentos relacionados

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos