desenvolvimento web 02 - david arty - senac
DESCRIPTION
Conceitos e exemplos sobre o desenvolvimento web. HTML5, CSS3 e JS Curso de HTML5 e CSS3TRANSCRIPT
![Page 1: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/1.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 2: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/2.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
HTML 5 : The Revolution
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
HTML 5 : The Revolution
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 3: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/3.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebHTML 5
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebHTML 5
Desenvolvimento WebDavid Arty
![Page 4: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/4.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A maior diferença no HTML5 para as antigas versões é a ausência da referência de um DTD (Document Type Definition), assim o início de um HTML que antes era assim: Para documentos tipo Strict: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> Para documentos tipo Transitional: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> Para documentos tipo Frameset: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset/
Antiga estrutura:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A maior diferença no HTML5 para as antigas versões é a ausência da referência de um DTD (Document Type Definition), assim o início de um HTML que antes era assim: Para documentos tipo Strict: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> Para documentos tipo Transitional: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> Para documentos tipo Frameset: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset/
Antiga estrutura:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 5: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/5.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A nova versão ficou bem mais fácil:��<!DOCTYPE html>
Nova estrutura:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A nova versão ficou bem mais fácil:��<!DOCTYPE html>
Nova estrutura:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 6: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/6.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Enctype (CHARSET) <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
Antiga estrutura:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Enctype (CHARSET) <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
Antiga estrutura:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 7: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/7.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A nova versão:��<meta charset=”utf-8”>
Nova estrutura:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
A nova versão:��<meta charset=”utf-8”>
Nova estrutura:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 8: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/8.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Sem semântica:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Sem semântica:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
<div id=”header”></div>
<div id=”navmenu”></div>
<div id=”content”></div>
<div id=”container”></div>
<div id=”aside”> </div>
<div id=”footer”></div>
OOCSSOOCSS
![Page 9: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/9.jpg)
<header></header>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<footer></footer>
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Com semântica:
<header></header>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<footer></footer>
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 Diferenças
Com semântica:
![Page 10: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/10.jpg)
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
<input type=”number” step=”1” min=”-10” max=”10”>
�<input name=tel type=tel/>
Input de número
Input de Telefone
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
<input type=”number” step=”1” min=”-10” max=”10”>
�<input name=tel type=tel/>
Input de número
Input de Telefone
![Page 11: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/11.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
<input name=slider type=range min=2 max=30 step=2 />
Input de sliderJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
�<input name=url type=url />
Input de URL
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
<input name=slider type=range min=2 max=30 step=2 />
Input de sliderJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 12: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/12.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
<input type=”email”/>
Input de e-mailJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
<input type=”date” value=”2013-08-11” max=”2013-12-31”/>
Input de caléndario
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
<input type=”email”/>
Input de e-mailJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 13: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/13.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
�<form action=”#”>��� <input type=”text” required=”required”/>�� <input type=”submit”/>��<form/>��
Input com requerimentoJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
�<form action=”#”>��� <input type=”text” required=”required”/>�� <input type=”submit”/>��<form/>��
Input com requerimentoJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 14: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/14.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
<audio controls> <source src=”media/audio01.mp3 type=”audio/mpeg”> </audio>
AúdioJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
<audio controls> <source src=”media/audio01.mp3 type=”audio/mpeg”> </audio>
AúdioJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
<video controls> <source src=”media/video.mp4” type=”video/mp4 poster=”media/video.jpg”> </video>
Video
![Page 15: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/15.jpg)
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
�<progress></progress>��<progress value=”30” max=”100”></progress>
Barra de progressoJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
�<progress></progress>��<progress value=”30” max=”100”></progress>
Barra de progresso
![Page 16: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/16.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
É o oposto de bitmap. Ao contrário do btimap ele não usa pixel e sim calcúlos matemáticos para compor a imagem.
SVG - Gráficos VetoriaisJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
É o oposto de bitmap. Ao contrário do btimap ele não usa pixel e sim calcúlos matemáticos para compor a imagem.
SVG - Gráficos VetoriaisJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 17: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/17.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
<svg xmlns=”www.w3.org/2000/svg” version=”1.1”> <circle cx=”100” cy=”50” r=“50” fill=”red”/> </svg>
SVG - Gráficos VetoriaisJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
<svg xmlns=”www.w3.org/2000/svg” version=”1.1”> <circle cx=”100” cy=”50” r=“50” fill=”red”/> </svg>
SVG - Gráficos VetoriaisJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 18: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/18.jpg)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
É a renderização de gráficos via java script Com o canvas você consegue de simples criar gráficos, animações, composições de imgens usando JavaScript.
CanvasJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML 5 - Algumas Novidades
É a renderização de gráficos via java script Com o canvas você consegue de simples criar gráficos, animações, composições de imgens usando JavaScript.
CanvasJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
![Page 19: Desenvolvimento Web 02 - David Arty - SENAC](https://reader037.vdocuments.mx/reader037/viewer/2022102816/558aab40d8b42a6d108b45c8/html5/thumbnails/19.jpg)
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Referências • heroisdati.com • maujor.com • tableless.com
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Referências • heroisdati.com • maujor.com • tableless.com