HTML5 & CSS3 Jonas Keizo Hirata TREINAMENTOS
|
|
|
- Benedita Amélia Penha Chaplin
- 6 Há anos
- Visualizações:
Transcrição
1 HTML5 & CSS3 Jonas Keizo Hirata TREINAMENTOS
2 O QUE VEREMOS? Uma breve história do HTML Estrutura de um documento HTML5 Comparação entre HTML4/XHTML e HTML5 Apresentar a especificação Descobrir as novas possibilidades
3 O QUE NÃO VEREMOS? Código e mais código Explicação detalhada de uso das APIs Exemplos de Elementos e ou APIs que não foram implementados por nenhum browser Explicações passo a passo de técnicas de como tentar tornar um browser compatível com o HTML5
4 TREINAMENTOS HTML5: UM POUCO DE HISTÓRIA 1998: HTML : XHTML Transitional Strict Frameset 2002: XHTML 2.0 Prometia uma revolução na linguagem 2004: Web Forms 2.0 Geração de desenvolvedores preocupados com código válido e bem estruturado. Quebraria a compatibilidade com browsers mais antigos X WHATWG Web Hypertext Application Technology Working Group
5 HTML5: UM POUCO DE HISTÓRIA 2006: W3C cai na real (XHTML 2.0) W3C WHATWG Processo de especificação totalmente diferente: aberto e empírico 2009: W3C direciona os esforços para o HTML ~ 2011: Suporte ao HTML5 aumenta a cada release dos browsers. 2012: O mundo acaba :P
6 HTML5: ESTRUTURA Vamos começar pelo começo e por aquilo que ninguém lembra de cabeça como se ecreve: DOCTYPE HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
7 HTML5: ESTRUTURA Vamos começar pelo começo e por aquilo que ninguém lembra de cabeça como se ecreve: DOCTYPE HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "
8 HTML5: ESTRUTURA Vamos começar pelo começo e por aquilo que ninguém lembra de cabeça como se ecreve: DOCTYPE HTML5 <!doctype html>
9 HTML5: ESTRUTURA Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META HTML 4.01 <meta http-equiv="content-type" content="text/html;charset=utf-8">
10 HTML5: ESTRUTURA Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META HTML 4.01 <meta http-equiv="content-type" content="text/html;charset=utf-8"> XHTML <meta http-equiv="content-type" content="text/html;charset=utf-8" />
11 HTML5: ESTRUTURA Outro elemento importante em qualquer documento HTML (HTML 4.01/XHTML/HTML5): META HTML 4.01 <meta http-equiv="content-type" content="text/html;charset=utf-8"> XHTML <meta http-equiv="content-type" content="text/html;charset=utf-8" /> HTML5 <meta charset="utf-8">
12 HTML5: ESTRUTURA Hora de juntar tudo... <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>título da página</title> </head> <body> <!-- Conteúdo aqui --> </body> </html>
13 HTML5: ESTRUTURA E aquele negócio de SGML e XML?
14 HTML5: ESTRUTURA E aquele negócio de SGML e XML? HEIN?!
15 HTML5: ESTRUTURA E aquele negócio de SGML e XML? <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>título</title> </head> <body> <p>texto simples. </body> </html> <html xmlns=" 1999/xhtml" xml:lang="pt-br"> <head> <meta charset="utf-8" /> <title>título</title> </head> <body> <p>texto simples.</p> </body> </html>
16 HTML5: ESTRUTURA E aquele negócio de SGML e XML? <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>título</title> </head> <body> <p>texto simples. </body> </html> <html xmlns=" 1999/xhtml" xml:lang="pt-br"> <head> <meta charset="utf-8" /> <title>título</title> </head> <body> <p>texto simples.</p> </body> </html> text/html application/xhtml+xml HTML Parser/Serializer Página XML Parser/Serializer
17 ESTRUTURA BÁSICA DE UM BLOG Como um blog se parece?
18 ESTRUTURA BÁSICA DE UM BLOG Como um blog se parece? Um possível wireframe seria... Cabeçalho (header) Post Menu lateral (sidebar) Post Rodapé (footer)
19 ESTRUTURA BÁSICA DE UM BLOG E em HTML, como ficaria?
20 ESTRUTURA BÁSICA DE UM BLOG E em HTML, como ficaria? Provavelmente assim... <div id="header"> <h1>meu BLOG</h1> </div> <div id="sidebar"> <ul> <li><a href="maio-2011.html">maio 2011</a></li> <li><a href="abril-2011.html">abril 2011</a></li> <li><a href="marco-2011.html">marco 2011</a></li> <li><a href="fevereiro-2011.html">fevereiro 2011</a></li> <li><a href="janeiro-2011.html">janeiro 2011</a></li> </ul> </div> <div class="post"> <h2>título do Post 1</h2> <p>texto do Post 1</p> </div> <div class="post"> <h2>título do Post 2</h2> <p>texto do Post 2</p> </div> <div id="footer"> <p><small>meu BLOG Nenhum direito reservado.</small></p> </div>
21 ESTRUTURA BÁSICA DE UM BLOG Apenas para visualizarmos o HTML em nosso wireframe... <div id= header > <div class= post > <div class= post > <div id= sidebar > <div id= footer >
22 ESTRUTURA BÁSICA DE UM BLOG Que diabos é esse tal <div>?!
23 ESTRUTURA BÁSICA DE UM BLOG De acordo com a especificação do HTML 4.01: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
24 ESTRUTURA BÁSICA DE UM BLOG De acordo com a especificação do HTML 4.01: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes. HEIN?! Inline?! Block-level?! Calma...
25 ESTRUTURA BÁSICA DE UM BLOG Uma palavrinha sobre semântica HTML... A semântica HTML é o uso da linguagem de marcação HTML para dar significado ao conteúdo de um documento ao invés de definir a sua apresentação (aparência).
26 ESTRUTURA BÁSICA DE UM BLOG Uma palavrinha sobre semântica HTML... A semântica HTML é o uso da linguagem de marcação HTML para dar significado ao conteúdo de um documento ao invés de definir a sua apresentação (aparência). Exemplo: <i>: formata um texto em itálico apresentação <em>: indica que o texto deve ser enfatizado significado <cite>: indica uma citação significado
27 ESTRUTURA BÁSICA DE UM BLOG OK, mas e aquele tal <div>?!
28 ESTRUTURA BÁSICA DE UM BLOG Apenas para visualizarmos o HTML em nosso wireframe... <div id= header > <div class= post > <div class= post > <div id= sidebar > <div id= footer >
29 ESTRUTURA BÁSICA DE UM BLOG O elemento <div> não possui significado e, por padrão, não afeta a apresentação. Mais uma olhadinha na especificação do HTML 4.01: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
30 ESTRUTURA BÁSICA DE UM BLOG Voltando ao nosso blog...
31 ESTRUTURA BÁSICA DE UM BLOG Não seria perfeito se fosse assim? <header> <post> <sidebar> <post> <footer>
32 ESTRUTURA BÁSICA DE UM BLOG Por quê?
33 ESTRUTURA BÁSICA DE UM BLOG Por quê? Dois motivos bem simples: 1 - obviamente, escreve-se menos 2 - traria significado ao conteúdo
34 ESTRUTURA BÁSICA DE UM BLOG Legal... e daí?
35 ESTRUTURA BÁSICA DE UM BLOG Legal... e daí? É aí que entre o HTML5! Um dos objetivos do HTML5 é trazer uma semântica maior aos elementos da linguagem. Para isso foram introduzidos novos elementos e alguns já existentes foram alterados semanticamente.
36 HTML5: ESTRUTURA Vamos ver como poderia ficar o nosso blog em HTML5: <header> <h1>meu BLOG</h1> </header> <aside> <nav> <ul> <li><a href="maio-2011.html">maio 2011</a></li> <li><a href="abril-2011.html">abril 2011</a></li> <li><a href="marco-2011.html">marco 2011</a></li> <li><a href="fevereiro-2011.html">fevereiro 2011</a></li> <li><a href="janeiro-2011.html">janeiro 2011</a></li> </ul> </nav> </aside> <article> <h2>título do Post 1</h2> <p>texto do Post 1</p> </article> <article> <h2>título do Post 2</h2> <p>texto do Post 2</p> </article> <footer> <p><small>meu BLOG Nenhum direito reservado.</small></p> </footer>
37 ESTRUTURA BÁSICA DE UM BLOG Apenas para visualizarmos o HTML5 em nosso wireframe... <header> <article> <article> <footer> <aside> As tags <post> e <sidebar> que utilizamos na nossa situação perfeita não existem. No lugar delas utilizamos as tags <article> e <aside> que são mais genéricas, afinal seria impossível existirem tags para para todo tipo de site com diversos temas diferentes, não é mesmo?
38 UM POUCO DE ESTATÍSTICA Analysis of Variance BSS n j X j M WSS = X ij 2 X j 2 X 2 j n j X 2 T N 2 n j n j 1 2 s j X 2 X j TSS = N -1 2 s T X ij M 2 2 X T X 2 T N F df b,df w BSS k 1 WSS n k df b k 1, df w n k, df t n 1 NOTE: T = Total M = Grand Mean N = Overall N TSS = BSS + WSS
39 UM POUCO DE ESTATÍSTICA TREINAMENTOS Analysis of Variance 2 2 BSS n j X j M X j nj 2 2 WSS = X n 1 s ij X j j j TSS = N -1 s 2 T F df,df df b k b w X 2 ij M BSS k 1 WSS n k 1, df w n k, df t n 1 X X XT 2 T 2 N?! 2 XT 2 NOTE: Xj 2 nj N T = Total M = Grand Mean N = Overall N TSS = BSS + WSS
40 UM POUCO DE ESTATÍSTICA TREINAMENTOS Analysis of Variance 2 2 BSS n j X j M X j nj 2 2 WSS = X n 1 s ij X j j j TSS = N -1 s 2 T F df,df df b k b w X 2 ij M BSS k 1 WSS n k 1, df w n k, df t n 1 X X XT 2 T 2 N 2 XT 2 NOTE: Xj 2 nj N T = Total M = Grand Mean N = Overall N TSS = BSS + WSS
41 UM POUCO DE ESTATÍSTICA Valores populares para o atributo id Total: Valor Frequência Valor Frequência Valor Frequência footer table wrapper content menu top header layer table logo autonumber layer container search sidebar main nav image Fonte: Opera MAMA crawler MAMA - Metadata Analysis and Mining Application
42 UM POUCO DE ESTATÍSTICA Valores populares para o atributo class Total: Valor Frequência Valor Frequência Valor Frequência footer menu style msonormal text content title style header copyright button main style small nav clear search style logo body left Fonte: Opera MAMA crawler MAMA - Metadata Analysis and Mining Application
43 UM POUCO DE ESTATÍSTICA Coincidência alguns desses nomes serem os mesmos que os utilizados em alguns dos novos elementos do HTML5?
44 UM POUCO DE ESTATÍSTICA Coincidência alguns desses nomes serem os mesmos que os utilizados em alguns dos novos elementos do HTML5? Não
45 UM POUCO DE ESTATÍSTICA Lembra que eu disse que o processo de especificação do HTML5 era diferente? Eu disse que era: Aberto Qualquer um pode participar da lista de do WHATWG Empírico Os responsáveis pela especificação não levaram em conta apenas o que era discutido nas listas de ou o que eles achavam melhor. Eles observaram o comportamento dos desenvolvedores, ou seja, analisaram páginas e mais páginas em busca de um padrão.
46 HTML5: NOVOS ELEMENTOS De marcação: <article> <aside> <figure> <figcaption> <footer> <header> <hgroup> <mark> <nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr>
47 HTML5: NOVOS ELEMENTOS De marcação: <article> <aside> <nav> <progress> <figure> <ruby> X <figcaption> <footer> <header> <hgroup> <mark> <rt> <rp> <section> <time> <wbr> Ruby: Linguagem de Programação
48 HTML5: NOVOS ELEMENTOS Mídia: <audio> <video> <source> <embed> Safari Firefox Chrome Opera 11.11
49 HTML5: NOVOS ELEMENTOS Gráfico: <canvas>
50 HTML5: NOVOS ELEMENTOS Gráfico: // Get the canvas element. var elem = document.getelementbyid('mycanvas'); if (!elem!elem.getcontext) { <canvas> return; } // Get the canvas 2d context. var context = elem.getcontext('2d'); if (!context) { return; } context.fillstyle = '#00f'; context.strokestyle = '#f00'; context.linewidth = 4; // Draw a right triangle. context.beginpath(); context.moveto(10, 10); context.lineto(100, 10); context.lineto(10, 100); context.lineto(10, 10); context.fill(); context.stroke(); context.closepath();
51 HTML5: NOVOS ELEMENTOS Gráfico: <canvas> Bibliotecas para manipular o canvas: gury - EaselJS - RGraph - Processing.js -
52 HTML5: NOVOS ELEMENTOS Formulário: <datalist> <keygen> <output>
53 HTML5: ELEMENTOS REDEFINIDOS <ol> <dl> <cite> <address> <em>, <i> <strong>, <b> <hr> <small>
54 HTML5: ELEMENTOS REDEFINIDOS <input type= TIPO > button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week
55 HTML5: ELEMENTOS REDEFINIDOS <input> Alguns dos novos atributos para o <input>: list autofocus placeholder required multiple pattern autocomplete* min max step
56 HTML5: ELEMENTOS REDEFINIDOS <input> Alguns dos novos atributos para o <input>: list autofocus placeholder required multiple pattern autocomplete* min max step * The off state indicates either that the control's input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for him; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.
57 HTML5: ATRIBUTOS GLOBAIS contenteditable data-* draggable= true spellcheck tabindex= -1 setattribute() getattribute()
58 HTML5: ARMAZENAMENTO Hoje em dia, como armazenamos dados localmente através de um documento HTML?
59 HTML5: ARMAZENAMENTO Hoje em dia, como armazenamos dados localmente através de um documento HTML? Uma dica... s
60 HTML5: ARMAZENAMENTO Hoje em dia, como armazenamos dados localmente através de um documento HTML? COOKIES Compartilhado com o servidor através do cabeçalho de requisição Chato de criar, chato de manter e chato de remover Para armazenar estruturas de dados um pouco mais complexas, deve ser serializado primeiro
61 HTML5: ARMAZENAMENTO Quais as opções do HTML5? COOKIES Web Storage Web SQL Databases
62 HORA DE DAR UMA BROCHADA E aí, já posso sair usando o HTML5?! Sim
63 HORA DE DAR UMA BROCHADA E aí, já posso sair usando o HTML5?! Sim... e Não Utilize o bom senso
64 HORA DE DAR UMA BROCHADA E aí, já posso sair usando o HTML5?! Sim... e Não Utilize o bom senso
65 CSS3 Temos vontade de matar o designer quando ele pede para...
66 CSS3 Temos vontade de matar o designer quando ele pede para... Fazer caixinhas com bordas arredondadas Colocar uma sombrinha nos textos/caixas Utilizar um background gigante Utilizar um background composto Fazer uma página adaptável ao tamanho da tela Fazer os títulos das páginas ter uma fonte mais style
67 CSS3: BORDAS ARREDONDADAS 1 2 border-radius: 10px; border-radius: 5px 10px 15px 20px; -moz-border-radius -webkit-border-radius 4 3
68 CSS3: SOMBRAS box-shadow: inset 5px 5px 5px #ff0000; -moz-box-shadow -webki-box-shadow box-shadow: 10px 10px 10px #000000;
69 CSS3: BACKGROUND GIGANTE Qual o problema do background gigante?
70 CSS3: BACKGROUND GIGANTE Qual o problema do background gigante?
71 CSS3: BACKGROUND GIGANTE Qual o problema do background gigante? Solução: SVG + background-size
72 CSS3: BACKGROUND COMPOSTO Como resolvemos hoje o problema dos backgrounds compostos?
73 CSS3: BACKGROUND COMPOSTO Como resolvemos hoje o problema dos backgrounds compostos? <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div>
74 CSS3: BACKGROUND COMPOSTO Como resolvemos hoje o problema dos backgrounds compostos? Solução: Múltiplas declarações de background.
75 CSS3: PÁGINA ADAPTÁVEL Como resolvemos o problema das páginas com aparências diferentes para tamanhos diferentes de tela?
76 CSS3: PÁGINA ADAPTÁVEL Como resolvemos o problema das páginas com aparências diferentes para tamanhos diferentes de tela? Antes do screen { p { font-family: sans-serif } } <link rel="stylesheet" media="print" href="..." />
77 CSS3: PÁGINA ADAPTÁVEL Como resolvemos o problema das páginas com aparências diferentes para tamanhos diferentes de tela? Antes do screen { p { font-family: sans-serif } } <link rel="stylesheet" media="print" href="..." /> all and (min-width:500px) {... print and (orientation: portrait) {... } <link rel="stylesheet" media="print and (min-width: 25cm)" href="..." />
78 CSS3: FONTES STYLE E as fontes diferentes das que não são as do padrão web?
79 CSS3: FONTES STYLE E as fontes diferentes das que não são as do padrão web? Como era feito até hoje? Imagem estática SIFR (Scalable Inman Flash Replacement) Cufón Imagem dinâmica (ex: FLIR)
80 CSS3: FONTES STYLE E as fontes diferentes das que não são as do padrão web? Como era feito até hoje? Imagem estática SIFR (Scalable Inman Flash Replacement) Cufón Imagem dinâmica (ex: FLIR)
81 CSS3: FONTES STYLE E as fontes diferentes das que não são as do padrão web? Com CSS3 fica { font-family: nomedafonte; src: url('/local-da-fonte/arquivo-da-fonte') format("tipo-da-fonte"); } Na hora de usar: ELEMENTO { font-family: nomedafonte, verdana, helvetica; }
82 CSS3: FONTES STYLE Padrões de formatos de fonte: WOFF (webfonts) TTF (Truetype) OTF (Opentype) SVG (Scalable Vector Graphic) iphone/ipad/webkit
83 CSS3: SELETORES Novos seletores de atributo: E[foo^="bar"] E[foo$="bar"] E[foo*="bar"]
84 CSS3: SELETORES Seletor de irmao genérico: E~F Funciona exatamente como o E + F, porém F não precisa estar imediatamente precedido de E
85 CSS3: PSEUDO-CLASSES Novas pseudo-classes: E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:enabled E:checked E:not(s)
86
87 HTML5 & CSS3 Jonas Keizo Hirata TREINAMENTOS
Pré-requisito Treinamento de Lógica de Programação, ou conhecimento equivalente.
1 HTML5 e 3 Descrição Aprenda no curso de HTML os conceitos essenciais para a criação de páginas web, junto com os novos recursos e possibilidades que o HTML5 e 3 oferecem para a criação de sites com códigos
#Fundamentos de uma página web
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Fundamentos de uma página web Eliezio Soares elieziosoares@ifrn.edu.br Aula de
HTML & CSS. uma introdução
HTML & CSS uma introdução HTML hypertext markup language CSS cascading style sheet linguagem de marcação que dá ao conteúdo estrutura e significado linguagem de estilo que dá ao conteúdo estilo e aparência
Prof. Erwin Alexander Uhlmann 1/7/2010
HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5
Programação para Internet I 9. HTML5. Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt
Programação para Internet I 9. HTML5 Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt Resumidamente, é o novo standard para estruturar conteúdo de páginas web. A última versão de HTML surgiu em 1999,
Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação HTML
Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação HTML Desenvolvimento de Sistemas para WEB Site: http://jeiks.net E-mail: jacsonrcsilva@gmail.com Visão
Introdução ao HTML5 e CSS3. Breno Leonardo Gomes de Menezes Araújo
Introdução ao HTML5 e CSS3 Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br Currículo Meu nome: Breno Leonardo G. de M. Araújo Formação: Bacharel em Sistemas
TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão
Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos
Web I F R N I N S T I T U TO F E D E R A L D E E D U C A Ç Ã O, C I Ê N C I A E T E C N O LO G I A D O R I O G R A N D E D O N R T E.
Web I F R N I N S T I T U TO F E D E R A L D E E D U C A Ç Ã O, C I Ê N C I A E T E C N O LO G I A D O R I O G R A N D E D O N R T E. J O S É A N TÔ N I O D A C U N H A Web Page HTTP No início a web, era
Linguagem de Programação Visual. Estrutura Basica do HTML5 Prof. Gleison Batista de Sousa
Linguagem de Programação Visual Estrutura Basica do HTML5 Prof. Gleison Batista de Sousa O que vai ser estudado Codificação; Linguagem de Programação; Infra Estrutura Basica; Ferramentas; Implantação;
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Declaração DOCTYPE em documentos HTML O W3C (World Wide Web Consortium: www.w3.org), encarregado da criação dos Standard webs, define
Aplicativos para Internet Aula 01
Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx
Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br
Desenvolvimento de Aplicações Web Programação Contextualização de aplicações Web: navegadores e servidores como interpretadores, tecnologias do lado do cliente (XHTML, CSS, Javascript) e do lado do servidor
Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Declaração DOCTYPE e Tag Raiz html
IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage DeclaraçãoDOCTYPEeTagRaizhtml ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger
HTML 5, UM ESTUDO SOBRE SEUS NOVOS RECURSOS
HTML 5, UM ESTUDO SOBRE SEUS NOVOS RECURSOS Clodoaldo Hiroiti Iamashita 1, Willian Barbosa Magalhães 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil hiroiteiamashita@hotmail.com wmagalhaes@unipar.br
Introdução à Tecnologia Web
IntroduçãoàTecnologiaWeb XHTML extensiblehypertextmarkuplanguage Revisão ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger XHTMLRevisão Índice 1 extensible HTML (XHTML)... 2 1.1 Diferenças entre
TECNOLOGIA WEB INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML
INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML 1 INTRODUÇÃO TECNOLOGIA WEB Começaremos desvendando o poder do desenvolvimento de aplicações baseadas na Web com a XHTML (Extensible HyperText Markup
Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript
1 Tecnologia WEB I Prof. Erwin Alexander Uhlmann Dos princípios do HTML, estruturação com CSS e automação com Javascript UHLMANN, Erwin Alexander. Dos princípios do HTML, estruturação com CSS e automação
Cascading: Style Sheet
André Kawamoto 2010 O que é CSS Cascading: Múltiplos estilos podem se sobrepor para especificar uma variedade de estilos desde um website inteiro até um único elemento. Qual estilo é aplicado diz respeito
HTML5. André Tavares da Silva. andre.silva@udesc.br
HTML5 André Tavares da Silva andre.silva@udesc.br O que é HTML5? HTML5 será o novo padrão para HTML, XHTML e HTML DOM (Document Object Model). A última versão (4.01) foi definida em 1999 e a Web mudou
Guia de Bolso HTML e XHTML
Guia de Bolso HTML e XHTML Este guia de bolso oferece uma listagem concisa, porém abrangente, dos elementos e atributos especificados nas Recomendações HTML 4.01 e XHTML 1.0. O texto utiliza a abreviação
Prof. Erwin Alexander Uhlmann 1/7/2010
AULA 2 As tags singulares como , , , entre outras, são aquelas que não possuem as tags de fechamento, elas abrem e nelas mesmas são encerradas, de acordo com o XHTML 1.1, o atual,
Técnicas e processos de produção. Profº Ritielle Souza
Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o
XTHML. 2. A finalidade do XHTML é substituir o HTML; 3. Vantagens de se usar XHTML (Compatibilidade com futuras aplicações);
1. XHTML TEM SUA ORIGEM NO XML; 2. A finalidade do XHTML é substituir o HTML; 3. Vantagens de se usar XHTML (Compatibilidade com futuras aplicações); 4. XHTML é uma "Web Standard ; Neste link (http://www.maujor.com/w3c/xhtml10_2ed.html)
Desenvolvimento Web. XHTML tag head e tags de texto. Professor: Bruno Gomes
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web XHTML tag head e tags de texto Professor: Bruno Gomes 2012 INTRODUÇÃO
Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Corpo Resumo
IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage ElementosdaSeçãodoCorpo Resumo ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger ElementosdaSeçãodoCorpo
Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?
Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais
#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.
#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver
Programação para web HTML: Formulários
Programação para web HTML: Formulários Professor: Harlley Lima E-mail: harlley@decom.cefetmg.br Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 9 de março
Interfaces Pessoa. Laboratório 1. Máquina. HTML, CSS, JS- Introdução
Interfaces Pessoa Máquina Laboratório 1 HTML, CSS, JS- Introdução 01 HTML + CSS + JavaScript Tecnologia para desenvolvimento web: Páginas web Aplicações web Aplicações mobile HTML Linguagem standard para
Aplicativos móveis com HTML5
Aplicativos móveis com HTML5 Preparando o ambiente de desenvolvimento O código HTML pode ser escrito em qualquer editor de texto comum. Você pode utilizar o editor padrão do seu sistema operacional (Bloco
Fábio Borges de Oliveira. HTML HyperText Markup Language
Fábio Borges de Oliveira HTML HyperText Markup Language Iniciando Código É a primeira tag de um documento HTML, nas primeiras versões dos browsers essa tag era obrigatória. Propriedade que
O que é o HTML5? Tags Canvas
O que é o HTML5? O código HTML está presente nas páginas da web há mais de dez anos e tem uma larga aceitação dos usuários por todo o mundo. Com certeza, qualquer pessoa que tem uma ligação um pouco mais
Minicurso introdutório de desenvolvimento para web em HTML5. Cristiano Costa
Minicurso introdutório de desenvolvimento para web em HTML5 Cristiano Costa Sobre mim Graduando em Engenharia Eletrônica - UNIFEI Trabalhou em desenvolvimento de sistemas empresariais (Base em servidores
<title>introdução a HTML</title>
introdução a HTML programação para a Internet prof. Vilson Heck Junior O que é HTML Hypertext Markup Language: Linguagem de Marcação de Hipertexto; É uma coleção de TAGs
O Futuro do Desenvolvimento Web
O Futuro do Desenvolvimento Web HTML 5, CSS 3 e como eles podem facilitar sua vida (ou não) Tiago Madeira madeira@ime.usp.br Academia Mozilla Brasil Congresso Internacional do Software Livre Museu da Imagem
Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html
Tags estruturais Cria um comentário Envolve todo um documento html Envolve o cabeçalho de um documento html Fornece informações gerais sobre o documento
#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio
#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Descrever os principais elementos da XHTML, Quando, Porque
HTML5 e Mobile Web Reinaldo Ferraz W3C Brasil
HTML5 e Mobile Web Reinaldo Ferraz W3C Brasil Um pouco do W3C O W3C no Brasil Web e W3C 5 Tim Berners-Lee criou / propôs a Web em 1989 (há 23 anos) (URI + HTTP + HTML) HTML5 - Futuro da Web Web em 1989
Webdesign A tag HEAD e as Meta tags
Webdesign A tag HEAD e as Meta tags Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net HEAD Como vimos anteriormente, o nosso documento HTML é
HTML: Linguagem de Marcação de HiperTexto (HyperText Markup Language) Pimentel, Morganna BSI -UNIRIO DPW
HTML: Linguagem de Marcação de HiperTexto (HyperText Markup Language) Pimentel, Morganna BSI -UNIRIO 1 DPW 2017.2 2 WWW: uma breve história Tim Berners-Lee pesquisador inglês na CERN (Organização Europeia
HTML: INTRODUÇÃO TAGS BÁSICAS
HTML: INTRODUÇÃO TAGS BÁSICAS CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB I PROF. ALEXANDRO DOS SANTOS SILVA 1 1 SUMÁRIO Definição Editores HTML Estrutura básica de um documento
<!DOCTYPE html PUBLIC...> <html> <head> </head> <body> </body> </html>
Estrutura de um documento criado com o Dreamweaver. (versão xhtml strict)
Técnico Integrado em Informática. Programação WEB (PRW) Introdução ao PHP
Técnico Integrado em Informática Programação WEB (PRW) Introdução ao PHP Prof. César Alberto da Silva Introdução ao PHP Delimitadores de código PHP //tag de abertura // Código PHP aqui!!! //tag de fechamento
Posicionamento, dimensões e outros elementos de HTML5 e CSS3
R o q u e F e r n a n d o G l a u c i o D a n i e l Te c h n o E d i t i o n E d i t o r a L t d a Posicionamento, dimensões e outros elementos de HTML5 e CSS3 Posicionamento, dimensões e outros elementos
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos
HTML5. José Antônio da Cunha
José Antônio da Cunha Novidades no HTML5 A maioria dos elementos e atributos da HTML4 continua válida na HTML5 e, em consequência, nada do que você aprendeu até agora sobre marcação HTML terá sido inútil.
Aplicações para Internet
Aplicações para Internet Material Teórico Conceitos Básicos do HTML Responsável pelo Conteúdo: Prof. Ms. Alexander Gobbato Paulino Albuquerque Revisão Textual: Profa. Ms. Fátima Furlan Conceitos Básicos
IFSC/Florianópolis - Prof. Herval Daminelli
Linguagem de marcação de textos; HTML significa Hypertext Markup Language (linguagem de marcação de hipertexto); Composta por elementos chamados tags ou rótulos ou marcadores; Estes marcadores definem
HTML5 Futuro da Web. Multimídia sem limites 2011 SENAC - SP
HTML5 Futuro da Web Multimídia sem limites 2011 SENAC - SP Web e W3C Tim Berners-Lee criou / propôs a Web em 1989 (há 22 anos) http://www.w3.org/history/1989/proposal.html (URI + HTTP + HTML) 2 Web e W3C
Tutorial. 1. O que é HTML? 2. Breve Historia
1. O que é HTML? Tutorial HTML é uma linguagem para descrever páginas web. HTML vem do ingles Hyper Text Markup Language que significa Linguagem de Marcação de Hipertexto. Para entender este conceito vamos
HTML5 ESSENCIAL. Fundamentos de todo serviço na Web
HTML5 ESSENCIAL Fundamentos de todo serviço na Web EMENTA Fundamentos de Web Documentos HTML Conteúdo Multimídia Semântica Desempenho 3 O QUE VEREMOS AGORA Fundamentos da Web Documentos HTML Conteúdo Section,
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) André Tavares da Silva andre.silva@udesc.br CSS Folha de Estilo em Cascata Mecanismo simples para adicionar estilos (fontes, cores, espaçamentos, por exemplo) aos documentos
Introdução a HTTP, HTML e CSS
MIEEC SIEM ano letivo 2014/15 Introdução a HTTP, HTML e CSS José A. Faria (jfaria@fe.up.pt) FEUP, DEGI Setembro 2014 1. Introdução ao protocolo HTTP Introdução A WEB -worldwideweb é um sistema global de
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar cabeçalhos e elementos de cabeçalhos de página em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste
Novidades do CSS3: sombras em textos e bordas. com as propriedades text-shadow e box-shadow. Por Erika Sarti, em 07_03_2010. Atualizado em 29_07_2011.
Novidades do CSS3: sombras em textos e bordas com as propriedades text-shadow e box-shadow Por Erika Sarti, em 07_03_2010. Atualizado em 29_07_2011. Introdução Este é o segundo artigo publicado aqui no
Ferramentas para Multimídia e Internet - 1486
1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato
Internet e Programação Web
COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 4 Técnico Prof. Cesar 2014 Conteúdo 1. ESTRUTURA DE UM DOCUMENTOHTML... 2 2. ELEMENTOS DA ESTRUTURA... 3 3. FORMULÁRIOS...Erro!
HTML - Definição e Conceitos
1 HTML - Definição e Conceitos HTML e uma abreviação para Hyper Text Markup Language ou Linguagem de Marcação de Hipertexto. É uma linguagem utilizada pra criação de páginas para a internet que serão "interpretadas"no
HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)
HTML HyperText Markup Language (Linguagem de marcação de hypertext) Tags de marcação Referência v1.1 2008-2017 Rui Menino tags Para formatar e paginar o texto dentro de uma página html, foi definido o
HTML: Recursos Básicos e Especiais
Linguagem de Programação para Web HTML: Recursos Básicos e Especiais Prof. Mauro Lopes 1-31 34 Objetivo Iremos aqui apresentar os recursos básicos e especiais do HTML. Serão apresentados, o uso de fontes,
Passo a passo para CRIAR E EDITAR CONTEÚDO DOS CURSOS
Passo a passo para CRIAR E EDITAR CONTEÚDO DOS CURSOS OK PARTE I Página Inicial STEP 1 Thumbnail, Breadcrumb e Arrow-Nav Página inicial HTML (parte da esquerda):
Etec Prof. Armando José Farinazzo 138
ETEC Profº Armando José Farinazzo Fernandópolis CONCURSO PÚBLICO DE PROFESSOR DE ENSINO MÉDIO E TÉCNICO - EDITAL Nº 138/04/2016 - PROCESSO Nº 6703/2016 CADERNO DE QUESTÕES PROVA ESCRITA Nome do(a) candidato(a):
Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação.
Porque usar css? Cascading Style Sheets (css) sobrepõe as características padrões dos browsers São usadas para melhorar e controlar a aparência de uma página web. Porque usar css? Permite que o conteúdo
Maurício Samy Silva. Novatec
Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20
Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.
Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor
W3C HTML5 Web Semântica Futuro da Web. Semana de Tecnologia FATEC Carapicuíba Outubro 2011
W3C HTML5 Web Semântica Semana de Tecnologia FATEC Carapicuíba Outubro 2011 Web e W3C Tim Berners-Lee criou / propôs a Web em 1989 (há 22 anos) http://www.w3.org/history/1989/proposal.html (URI + HTTP
O que faz um servidor/navegador web? 30/03/2017 Rômulo da Silva Lima Slid e 2
HTML O que faz um servidor/navegador web? e 2 O que é? HyperText Markup Language Utilizada para produzir páginas WEB Documentos escritos na linguagem HTML podem ser traduzidos por browser O HTML utiliza
HTML5 HyperText Markup Language v5
HTML5 HyperText Markup Language v5 Composição Web Engenharia InformáBca / InformáBca Web 2014/15 Artur M. Arsénio O Que há de novo no HTML5? A declaração DOCTYPE do HTML5 é muito simples:
Anexo I. Recomendações para construção de páginas acessíveis para o EAD da Universidade Caixa.
Anexo I Recomendações para construção de páginas acessíveis para o EAD da Universidade Caixa. NOTA: Os exemplos utilizados neste documento fazem referência a uma página de curso com quatro níveis, conforme
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
PROGRAMAÇÃO PARA INTERNET HTML
PROGRAMAÇÃO PARA INTERNET HTML Prof. Rafael Gross INTRODUÇÃO Quando acessamos uma página web, estamos interessados na informação contida nessa página. Essa informação pode estar na forma de texto, imagem
Vamos ver como fica no código HTML e CSS na Listagem 1 abaixo:
Título: Alinhamento Central com CSS Descrição: Neste artigo serão mostrados os atributos e recursos necessários para alinhamentos de elementos inscritos no HTML, que no caso é o CSS. Login: alcideswenner
WEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre
Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva
Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1
Introdução ao HTML 5 e Implementação de Documentos
Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar
TABLELESS E PROJETO ESTRUTURAL
Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se
TP1 - TÉCNICAS DE PROGRAMAÇÃO PARA INTERNET I. Profª Eulaliane Gonçalves
TP1 - TÉCNICAS DE PROGRAMAÇÃO PARA INTERNET I Profª Eulaliane Gonçalves COMPETÊNCIAS 1. Interpretar e desenvolver páginas para Web. HABILIDADES 1.1. Coletar dados e informações de usuários para elaboração
Apostila de XHTML Curso de Internet Professor Rinaldo Demétrio
Conteúdo XHTML - Por quê?... 2 Porque XHTML?... 2 Diferenças Entre XHTML e HTML... 3 Como Preparar-se para a XHTML... 3 As Diferenças Mais Importantes:... 3 Os Elementos Devem Estar Devidamente Aninhados...
1) Em um documento separado fora de todos os documentos HTML;
Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte
Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML
Nesta disciplina aprenderemos. HTML CSS JavaScript Jquery PHP
Introdução Nesta disciplina aprenderemos HTML CSS JavaScript Jquery PHP HTML é a abreviatura de HyperText Mark-up Language. O HTML foi inventado em 1990, por um cientista chamado Tim Berners-Lee. A finalidade
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO CSS - Cascading Style Sheets Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar
Introdução à Cascading Style Sheets
Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas
HTML. Frames e FORMs
HTML Frames e FORMs Frames As frames são divisões do ecrã do browser em diversas janelas (ou quadros ). Torna-se assim possível apresentar mais do que uma página numa janela do browser. É muito fácil colocar
UFCD 0793 Scripts CGI e Folhas de Estilo Formadora: Sónia Rodrigues
UFCD 0793 Scripts CGI e Folhas de Estilo Formadora: Sónia Rodrigues 0793 Scripts CGI e folhas de estilo Objectivos da UFCD: Desenvolver páginas para a Web, através de scripts CGI e folhas de estilo. UFCD
Acessibilidade na web O caminho das pedras para construir páginas acessíveis
Acessibilidade na web O caminho das pedras para construir páginas acessíveis 21 de maio de 2012 Road Show Senac 2012 Marilia SP Reinaldo Ferraz W3C.br Um pouco do W3C É um consórcio internacional, criado
Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013
Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário
CRIAÇÃO DE APLICAÇÃO WEBMAPPING COM O AUXILIO DO ALOV MAP
CRIAÇÃO DE APLICAÇÃO WEBMAPPING COM O AUXILIO DO ALOV MAP INTRODUÇÃO O ALOV Map é uma aplicação construída usando-se a linguagem Java que permite visualizar mapas tanto em formato vetorial do tipo shapefile
TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com
Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação
08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão
Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior
Aplicações para Internet
Aplicações para Internet Material Teórico Formulários e Vídeos Responsável pelo Conteúdo: Prof. Ms. Alexander Gobbato Paulino Albuquerque Revisão Textual: Profa. Ms. Fátima Furlan Formulários e Vídeos
HTML5. Prof. Salustiano Rodrigues de Oliveira saluorodrigues@gmail.com www.profsalu.com.br
HTML5 Prof. Salustiano Rodrigues de Oliveira saluorodrigues@gmail.com www.profsalu.com.br HTML5 HTML5 é considerada a próxima geração do HTML e suas funcionalidades inovadoras o tornam uma alternativa
SCE Aula 3 Arquitetura de software na Web atual: processamento de lado cliente. Prof: Dra. Renata Pontin de Mattos Fortes
SCE 0265 Aula 3 Arquitetura de software na Web atual: processamento de lado cliente Prof: Dra. Renata Pontin de Mattos Fortes Aluno PAE: Willian Massami Watanabe Sumário da aula Aplicações Estáticas x
QUEM FEZ O TRABALHO?
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome
Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes
Desenvolvimento Web Introdução a XHTML Prof. Bruno Gomes 2014 Introdução HTML e XHTML Estrutura básica do documento DTDs Validação do documento Exercícios HTML e XHTML HTML (Hipertext Markup Language)
CSS. Cascading Style Sheets Style Sheets
CSS Cascading Style Sheets Style Sheets Agenda Histórico Definição Limitações do CSS-1 CSS2 - Características Por que usar CSS? Vantagens Sintaxe Básica Como inserir uma folha de Estilo Indentificando