Java Corporativo (RIAs) HTML, CSS e Javascript. Edson Koiti Kudo Yasojima

Tamanho: px
Começar a partir da página:

Download "Java Corporativo (RIAs) HTML, CSS e Javascript. Edson Koiti Kudo Yasojima"

Transcrição

1 Java Corporativo (RIAs) HTML, CSS e Javascript Edson Koiti Kudo Yasojima

2 Rich Internet Application (RIA) Oferece interfaces ricas e novas experiências ao usuário, tanto web como desktop. Web 2.0 Animações, Interação, Produtividade, Marketing

3 Rich Internet Application (RIA) Vantagens: Melhores Interfaces Equilíbrio Client/Server Comunicação Assíncrona (AJAX) Deficiências: Obrigatoriedade do uso de scripting Tempo de carregamento Novos paradigmas para arquitetura de aplicações Deficiência em indexação de busca

4 Rich Internet Application (RIA) Tecnologias: atualmente estas possuem a detenção de mais de 50% do mercado atual das RIAs: Adobe Flash HTML 5 (Scridb e Youtube) Java Microsoft (Silverlight) Fonte:

5 Rich Internet Application (RIA) Alguns exemplos: E mais milhares de outros por aí...

6 Rich Internet Application (RIA) O que se pode utilizar para criar RIAs? Adobe Flash/Flex Java Richfaces, Icefaces, Vaadim, Primefaces, JBossSeam, JavaFx Microsoft Silverlight HTML 5 Google GWT, SmartGWT. Jquery, DojoToolkit, Scriptaculous

7 Rich Internet Application (RIA) Conhecimentos desejáveis: HTML CSS Javascript (Jquery, Scriptaculous, etc.) Actionscript (Adobe) C# (Microsoft) JavaEE (Vários frameworks de RIA para Java)

8 HTML Hiper Text Markup Language Linguagem de marcação <a></a> <br/> Utiliza Tags para interpretar e processar texto

9 HTML Estrutura básica

10 HTML Algumas tags Importantes <div> - Definem e encapsulam estruturas. <table>, <tr>, <td> - Definem a construção de tabelas. <a> - Criam hiperlinks. <img> - Utilizada para carregar imagens <form> - Definem formulários <script> e <link> - Utilizados para invocar arquivos externos como CSS e Javascript

11 HTML - Sintaxe Uma sempre inicia e se fecha dentro da mesmo O conteúdo da página sempre estará entre tags A maioria das tags permitem o uso de atributos

12 HTML XHTML?? XHTML XML (extensible Markup Language) Mais regras Melhor padronização (W3C) Mais consistente Possibilidade de extensão da linguagem de marcação (JSF, Jboss Seam, etc.)

13 XHTML Algumas Padronizações Errado: <p><div><a></div></p></a> Certo: <p><div><a></a></div></p> Errado: <HTML></HTML> Certo: <html></html> Errado: <br> Certo: <br/> Errado: <td rowspan = 3> Certo: <td rowspan = 3 ou 3 >

14 XHTML - Continuação Cabeçalho de um documento XHTML Lista completa das tags XHTML

15 XHTML - IDEs Alguns interessantes ambientes para desenvolvimento em xhtml. Netbeans Eclipse Aptana Notepad++ Dreamweaver

16 HTML - Prática Definindo um projeto New > Web Project > Basic Template > Ok

17 HTML - Prática Adicionando o título <h1> e um paragrafo qualquer <p>.

18 HTML - Prática Experimente também utilizar tags como <b> e <i>, negrito e itálico respectivamente

19 HTML - Prática Utilizando a tag <a>, pode-se direcionar o usuário para outras páginas ou para seções dentro da própria página.

20 HTML - Prática Para carregar imagens utiliza-se a tag <img>, passando atributos da url (caminho) da imagem e opcionalmente o alt (texto complementar). Lembre de passar o caminho da imagem de acordo com a localização da página.

21 HTML - Prática Outro atributo importante é a <table> pra construção de tabelas. Esta tag utiliza outras duas tags <tr> e <td> para organizar as linhas e colunas.

22 HTML - Prática Formulários <form> são bastante utilizados em HTML para coletar dados. Dentro de cada formulário, pode haver várias tags <input> que serão de vários tipos e podem ter valores distintos. Como de costume, é sempre bom ter um editor que ofereça auxílio de código ou uma documentação HTML em mãos para entender todos os inputs e atributos.

23 HTML - Prática

24 HTML - Prática Os <iframe> permitem que você abra outras páginas dentro da sua página web. Além disso ele também é utilizado para incorporar materiais multimídia, como vídeos, jogo em flash, webservices (google maps) e etc.

25 HTML - Prática

26 CSS - Introdução Cascate Style Sheets Definem padrões de como elementos HTML serão mostrados ao usuário. Surgiram no HTML 4.0 como meio de resolver problemas de interface Permitem organizar estilos e estrutura de páginas web.

27 CSS - Organização A utilização de um CSS se dá por um arquivo separado ou por um bloco de comandos em parte da página através da tag <style>.

28 CSS - Organização Lembrando que por padrões de organização, é altamente recomendável que o CSS sempre fique em um arquivo separado do arquivo HTML. Para utilizar o arquivo CSS fora do documento HTML, basta linkar na página HTML com a tag <link>

29 CSS - Sintaxe A sintaxe do CSS é bastante simples, basicamente as são constituídas de seletores e declarações entre chaves ({ }) Propriedade Valor body { background-color: red; font-size: 20px; } Seletor Declaração Declaração

30 CSS - Sintaxe Exemplo: estilo.css pagina.html

31 CSS - Sintaxe O CSS também permite localizar e manipular elementos pelo seu atributo id e também criar e atribuir classes a estes elementos utilizando o atributo class. #id_do_elemento.nome_da_classe Seletor Seletor

32 CSS - Sintaxe ATENÇÃO!! Não escrever nomes de classes ou ids começando com números pelamordedeus!! O CSS, assim como o Javascript possui incopatibidade entre browsers, algumas coisas são permitidas por alguns, e outros não.

33 CSS - Sintaxe Exemplo

34 CSS - Sintaxe Beleza, mas qual a diferença entre class e id? Ambos funcionam da mesma maneira, no entanto, por padrões de boas práticas, utilizamos id em uma relação de 1-1 enquanto que no class utilizamos de 1-N, ou seja, uma classe X no CSS pode alterar muitos elementos que tenham o atributo class = X

35 CSS - Sintaxe #quadrado {...} 1..1 <div id= quadrado >.quadrado {...} 1..N <div class= quadrado > <p class= quadrado > <h1 class= quadrado >

36 CSS - Sintaxe É possível também utilizar a estrutura tag.nome_da_classe em um seletor CSS. Apenas as tags que tenham determinada classe irão sofrer as mudanças. Exemplo: div.quadrado {..} Quem se tornará um quadrado realmente, p ou div?

37 CSS - Sintaxe ATENÇÃO!! Não coloque espaço em valores que precisem especificar a unidade. Incompatibilidade de Browsers... Exemplo: Certo: font-size:20px Errado: font-size:20 px

38 CSS - Background Backgrounds ou fundo de tela, possuem vários sub-atributos, mais importantes: Background-color Background-image Background-repeat Background-position

39 CSS - Background Background-color, permite adicionar uma cor ao fundo de tela de um elemento. Os parâmetros podem ser passados através do nome da cor em inglês ou representação hexadecimal. Exemplo:

40 CSS - Background ATENÇÃO!! Quanto ao uso de cores, sempre é recomendável o uso de cores seguras para web, evitando erros na renderização de alguns browsers. Lista de cores seguras:

41 CSS - Background Background-image: adiciona uma imagem como fundo de um elemento. É representada por uma url onde indica o caminho da imagem local ou remoto.

42 CSS-Background

43 CSS-Background Caso a imagem seja menor que a área do elemento, ela irá se repetir até preencher toda a extensão do elemento. Imagem inicial

44 CSS-Background Para controlar a repetição de imagens, o atributo background-repeat pode ser utilizado. Podendo controlar se a repetição irá na horizontal ou vertical, ou se ela irá ou não acontecer de fato. Valores assumidos: no-repeat: não repete a imagem repeat-x: repete apenas na horizontal repeat-y: repete apenas na vertical repeat: repete vertical e horizontal (padrão)

45 CSS-Background Exemplo no-repeat: repeat-x: repeat-y:

46 CSS-Background Caso haja, a necessidade de posicionar o background, pode-se usar o atributo background-position, podendo indicar a posição inicial da imagem. Valores assumidos: bottom: abaixo right: direita left: esquerda top: acima É possível também a concatenação de valores (ex: direita e acima = right top)

47 CSS-Textos Texto são imprescindíveis na construção de páginas web. Eles são altamente customizáveis no CSS e possuem vários atributos, dentre os quais são: color: cor do texto text alignment: alinhamento do texto text decoration: decoração do texto (sublinhado, cortado, piscando..) text transformation: todas as letras minúsculas, maiúsculas, apenas a primeira letra maiúscula. text indentation: espaçamento no inicio do paragrafo em pixels.

48 CSS Textos Exemplo tudo-em-um:

49 CSS - Fontes Fontes são o tipo de forma que as letras do texto irão tomar. Fontes podem ser do tipo com serifa ou sem. Os que não tem serifa são mais fáceis para leitura. Alguns atributos: font-family: tipo da fonte (times, arial..) font-style: estilo (normal, itálico..) font-size: tamanho da fonte em pixels

50 CSS - Fontes ATENÇÃO!!! Ao escolher sua font-family, verifique a tabela de fontes seguras para web, evitando erros de renderização entre browsers. Tabelas de fontes seguras:

51 CSS - Fontes Exemplo completo:

52 CSS - Links Links possuem algumas características que indicam quando você já visitou o link, quando o mouse passa por cima, quando está ativo etc. É possivel customizar esses estado apenas mudando o seletor de um link: a:link {..} Link normal a:visited {..} Link visitado a:hover {..} Link com o mouse em cima a:active {..} Link ativo

53 CSS Atributos importantes Existem tambem outros atributos bastante importantes no uso do CSS. Eles são de extrema importancia na criação de layouts e posicionamento dos elementos CSS. Segue alguns: margin: espaçamento externo padding: espaçamento interno border: propriedades da borda width/height: largura/altura content: conteúdo

54 CSS Atributos importantes Esquema

55 CSS Atributos importantes Exemplo

56 CSS - Outros Existem vários outros elementos que possuem estados e podem ser editados via CSS. É claro que para ter um melhor domínio é fazendo uso de ferramentas que auxiliem a escrita de folhas de estilo. Muitas das IDEs já possuem auxilio ao CSS, cabe a cada um explorar mais estes elementos.

57 Javascript - Introdução Esta é uma das mais populares linguagens de programação para web. Baseado no ECMAScript. Tornou-se muito adotada pois é bastante leve, rápida e é suportada por todos os browsers existentes mais famosos no mercado.

58 Javascript - Características Dinâmica Linguagem fracamente tipificada Paradigmas funcional e OO MUITO diferente de Java Utiliza conceitos de prototipagem

59 Javascript - Sintaxe Exemplo

60 Javascript - Sintaxe O Javascript permite acessar a página html via um objeto chamado document. Com ele é possível acessar elementos da página como divs, links, etc. e alterá-los de acordo com o desejado em tempo de execução, sem precisa recarregar toda a página necessariamente.

61 Javascript - Sintaxe Exemplo

62 Javascript - Sintaxe O código javascript pode ser separado da página HTML, em um arquivo separado com extensão.js. É altamente recomendável fazer essa separação por padrões de organização de código. Para utilizar o arquivo separado basta utilizar a tag <script> para chama-lo dentro da página. Exemplo:

63 Javascript - Sintaxe Como não é uma linguagem fortemente tipificada, o conceito de variáveis é muito genérico. Uma variável é tratada como uma referência na memória e pode assumir várias formas (até mesmo de funções).

64 Javascript - Sintaxe Testem isso: Vai funcionar??

65 Javascript - Sintaxe Entendam funções no javascript como objetos. Cada função, quando chamada é instanciada (assim como um objeto) e passa a existir na memória, assim como variáveis criadas dentro dela. Estranho né? Veja um exemplo a seguir..

66 Javascript - Sintaxe Exemplo Resultado?

67 Javascript - Sintaxe O Javascript também admite instanciações de objetos (vulgo new Objeto() ) através do uso do new que nem em Java/C#. Mas com algumas pecularidades... Veja a seguir:

68 Javascript - Sintaxe user.name e name serão iguais??

69 Javascript - Sintaxe Condicionais não possuem muita diferença com outras linguagens, veja os exemplos:

70 Javascript - Sintaxe Loops também não diferem muito da linguagem Java:

71 Javascript - Sintaxe Basicamente o javascript, é utilizado da seguinte forma: Cria-se uma função Utiliza-se a função em eventos dos componentes onclick, onfocus, onselect.. Ou para alterar propriedades do design. document.getelement().innerhtml == blablabla

72 Javascript - Sintaxe Além disso é também utilizado para realizar chamadas AJAX (Assynchonous Javascript and XML), ou seja, acessar um serviço remotamente e mostrar ao usuário sem precisar recarregar toda a página HTML.

73 Javascript - Sintaxe Mostrar exemplo ajax

74 Javascript - Problemas Linguagem difícil de se aprender Pouca organização em relação a linguagens atuais (Java, C#..) O grande problema de Cross-Browser!! Não pense que seu código irá funcionar perfeitamente em todos os navegadores sem a devido teste! Isso é chato não é?

75 Javascript - JQuery Jquery é uma das mais famosas e utilizadas bibliotecas Javascript criadas inicialmente por John Resig. Simplifica a escrita e resolve a maioria dos problemas cross-browser Utiliza objeto próprio para fazer operações de forma efetiva e correta na maioria dos browsers

76 Jquery - Instalação Para instalar o jquery, basta fazer o download da biblioteca e adicioná-la na página web com a tag <script>

77 Jquery - Sintaxe A sintaxe do jquery se organiza de forma simples. $( div ).addclass( meucss ).show( slow ); Objeto JQuery Chamada de métodos concatenados

78 Jquery Seletores e Eventos Utilizando Jquery e expressões CSS e Xpath, podemos selecionar praticamente qualquer coisa de desejamos na página. Basta passar dentro do objeto do Jquery. Exemplo: $("#orderedlist").addclass("red"); $("#orderedlist > l i " ). addclass("blue");

79 Jquery Seletores e Eventos Se quisermos aplicar mudanças apenas quando o usuário passar o mouse em cima do link podemos utilizar a seguinte abordagem: $("#orderedlist li:last").hover(function() { $(this).addclass("green"); },function(){ $(this).r e m o v e C l a s s ("green"); });

80 Jquery Seletores e Eventos Caso a busca seja de multiplos objetos, o Jquery, tem um for implementado que otimiza nosso código. Vamos tentar: $ ( " # o r d e r e d l i s t " ). f i n d ( " l i " ). e a c h ( f u n c t i o n ( i ) { $(t h i s ). a p p e n d ( " A C H O U! " + i ); } ) ;

81 Jquery Seletores e Eventos Caso o Jquery ache mais de um elemento, ele retorna em forma de array, onde podemos selecionar como um array convencional: $ ( " # r e s e t " ). c l i c k ( f u n c t i o n ( ) { $ ( " f o r m " ) [ 0 ]. r e s e t ( ) ; } ) ; O método reset(), é do Javascript puro e ele reseta praticamente qualquer input ou form

82 Jquery Seletores e Eventos Este é para o caso de resetar todos os forms da página: $ ( " # r e s e t " ). c l i c k ( f u n c t i o n ( ) { $ ( " f o r m " ). e a c h ( f u n c t i o n ( ) { t h i s. r e s e t ( ) ; } ) ; } ) ; Pergunta: por quê não estamos utilizando $(this) acima?

83 Jquery Seletores e Eventos O Jquery também pode fazer buscas mais complexas como: $ ( " l i " ). n o t ( " : h a s ( ul) " ). c s s ( " b o r d e r ", " 1 p x s o l i d b l a c k " ) ; $ ( " a [ n a m e ] " ). c s s ( " b a c k g r o u n d ", b l u e " ) ; $ ( " a [ h r e f *=' / c o n t e n t / g a l l e r y ' ] " ). c l i c k ( f u n c t i on( ) { //f a ç a a l g o } ) ; Simples, não é?

84 Jquery Seletores e Eventos Criando um organizador de tópicos: $('#faq').find('dd').hide().end().find('dt'). click(function() { }); $(this).next().slidetoggle(); Conseguiram interpretar o código?

85 Jquery Seletores e Eventos Buscando por tags raiz de uma tag: $("a").hover(function(){ $(this).parents("p").addclass("highligh t "); },function(){ $(this).parents("p").removeclass("high light"); });

86 Jquery Usando Ajax Vamos ao exemplo prático!

87 Jquery Animando Jquery fornece funcionalidades para criar animações, ainda permite que você crie suas próprias animações. No website do jquery além de animações, existem vários outros plugins que podem ser muito úteis para determinados problemas.

88 Jquery Animando $("a").toggle(function(){ $(".stuff").hide('slow'); },function(){ }); $(".stuff").show('fast');

89 Jquery Animando Criando uma animação, exemplo: $("a").toggle( function(){ }); $(".stuff").animate({ height: ' hide', opacity: ' hide' }, 'slow'); }, function(){ $(".stuff").animate({ height: ' s h o w ', opacity: 'show' }, 'slow');

90 Jquery Utilizando plugins Plugins javascript são muito fáceis de se utilizar, basta baixar e salvar plugins com a extensão.js e importá-los na mesma página HTML do jquery utilizando a tag script. Como exemplo vamos utilizar o tablesorter plugin para organizar tabelas:

91 Jquery Utilizando plugins Após a chamada, o código do plugin já está integrado com o jquery. Basta chamar o método no código: $("#large").tablesorter(); $("#large").tablesorter({ }); widgets: [ ' z e b r a ' ]

92 Java Corporativo (RIAs) HTML, CSS e Javascript Edson Koiti Kudo Yasojima

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

Aula 5 Cabeçalhos, Imagens e Links

Aula 5 Cabeçalhos, Imagens e Links Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

Compêndio códigos. {css}

Compêndio códigos. {css} Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS. UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015 Agenda Introdução; Website Layouts; CSS; Referências. 2 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.:

Leia mais

CSS - Parte 02. Prof. Marciano dos Santos Dionizio

CSS - Parte 02. Prof. Marciano dos Santos Dionizio CSS - Parte 02 Prof. Marciano dos Santos Dionizio Imagens de fundo [backgroundimage] A propriedade CSS background-image é usada para definir uma imagem de fundo. Usaremos a imagem de uma borboleta para

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas

Leia mais

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com.

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com. 3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo

Leia mais

CSS Luciano Otávio de Assis CSS

CSS Luciano Otávio de Assis CSS CSS O HTML tem suas limitações quando se tratar de se construir layout. É certo, você tem seis diferentes tipos s títulos e de 6 diferentes tamanhos de fontes. Quando você trabalha com tabelas, você tem

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...

Leia mais

jquery Apostila Básica

jquery Apostila Básica jquery Apostila Básica INTRODUÇÃO 3 CAPÍTULO 1 POR ONDE INICIAR 3 CAPÍTULO 2 MEU PRIMEIRO SCRIPT! 4 EXERCÍCIOS...5 CAPÍTULO 3 ADICIONANDO CSS 6 EXERCÍCIOS...7 CAPÍTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO

Leia mais

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Do inglês, Cascading Style Sheet, ou folha de estilo em cascata. É uma linguagem

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

Leia mais

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores

Leia mais

Ferramentas Programáveis. Profº Ritielle Souza

Ferramentas Programáveis. Profº Ritielle Souza Ferramentas Programáveis Profº Ritielle Souza Folhas de Estilo Existem três formas de trabalharmos com folhas de estilos Forma mais usual CSS Externo Estilo na página Forma menos usual estilo inline

Leia mais

Introdução à Cascading Style Sheets

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

Leia mais

MANUAL DE BOAS PRÁTICAS

MANUAL DE BOAS PRÁTICAS MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML

Leia mais

APOSTILA DE PROGRAMAÇÃO WEB

APOSTILA DE PROGRAMAÇÃO WEB Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido

Leia mais

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Programação para Internet Rica 1 Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Objetivo: Capacitar o aluno para o trabalho com o framework JQuery. INTRODUÇÃO JQuery é uma biblioteca

Leia mais

foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX

foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX foi desenvolvida... para criar animações, manipular eventos e desenvolver aplicações AJAX é uma biblioteca Java Script crossbrowser desenvolvida para simplificar os scripts que interagem com a linguagem

Leia mais

Aplicativos para Internet Aula 01

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

Leia mais

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

Leia mais

Curso de Desenvolvimento Web com HTML5, CSS3 e jquery

Curso de Desenvolvimento Web com HTML5, CSS3 e jquery Curso de Desenvolvimento Web com HTML5, CSS3 e jquery Professor: Marcelo Ricardo Minholi CH: 32 horas anuais (4 dias de 8 horas) Umuarama - 2012 Fundamentação Teórica: HTML (acrônimo para a expressão inglesa

Leia mais

QUEM FEZ O TRABALHO?

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

Leia mais

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

Leia mais

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

Leia mais

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Aula 1 Desenvolvimento Web Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Plano de Aula Ementa Avaliação Ementa Noções sobre Internet. HTML

Leia mais

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

Exemplo de uso correto da semântica HTML

<!DOCTYPE html> <html lang = pt-br> <head> <meta charset = UTF-8> <title> Exemplo de uso correto da semântica HTML </title> </ head > Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração . TAG

Leia mais

Home Page da Estação Automática do IF-SC

Home Page da Estação Automática do IF-SC Home Page da Estação Automática do IF-SC Ana Paula Jorge Fraga Email: anaa_fraga@hotmail.com Artur da Silva Querino E-mail: arturquerino@gmail.com Kathilça Lopes de Souza E-mail: kathii16@hotmail.com Rayana

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

Unidade: O que é CSS? HTML e CSS? Boa aula!!!

Unidade: O que é CSS? HTML e CSS? Boa aula!!! Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação

Leia mais

PROF. DANIELA PIRES. Aplicações para Web. Aplicações para Web - FMU - 2012 - Prof. Daniela Pires

PROF. DANIELA PIRES. Aplicações para Web. Aplicações para Web - FMU - 2012 - Prof. Daniela Pires PROF. DANIELA PIRES Aplicações para Web 1 *Oficialmente: *Uma biblioteca escrita em Javascript *Uma definição melhor: *jquery é uma Biblioteca JavaScript que simplifica a manipulação de um documento HTML

Leia mais

FOLHAS DE ESTILO EM CASCATA

FOLHAS DE ESTILO EM CASCATA FOLHAS DE ESTILO EM CASCATA CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascata são um conjunto de regras de estilo que definem como os elementos e os tags em uma página HTML devem ser exibidos

Leia mais

Web Design Aula 02: HTML

Web Design Aula 02: HTML Web Design Aula 02: HTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Introdução Conceitos HTML Primeira Página Identação Incluindo o título Salvando a página Vizualizando

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza Ferramentas Programáveis Mensagem para mais de um destinatário FALE CONOSCO Definindo

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

Introdução às Folhas de Estilo

Introdução às Folhas de Estilo Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos

Leia mais

Web Design Aula 15: Conhecendo CSS

Web Design Aula 15: Conhecendo CSS Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando

Leia mais

Web Design Aula 13: Introdução a CSS

Web Design Aula 13: Introdução a CSS Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas

Leia mais

MANUAL DE BOAS PRÁTICAS

MANUAL DE BOAS PRÁTICAS MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML

Leia mais

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),

Leia mais

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente

Leia mais

Introdução à Tecnologia Web. Ferramentas e Tecnologias de Desenvolvimento Web. Profª MSc. Elizabete Munzlinger www.elizabete.com.

Introdução à Tecnologia Web. Ferramentas e Tecnologias de Desenvolvimento Web. Profª MSc. Elizabete Munzlinger www.elizabete.com. IntroduçãoàTecnologiaWeb FerramentaseTecnologiasde DesenvolvimentoWeb ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br FerramentaseTecnologiasde DesenvolvimentoWeb

Leia mais

Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr.

Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr. Então gente, há alguns dias, disponibilizei meu theme antigo, o primeiro feito por mim, e eu não coloquei appearance nele, e quem não tem conhecimento de html fica meio tenso de editar. Então, ao invés

Leia mais

Web design & HTML. avançado

Web design & HTML. avançado Web design & HTML avançado Helder da Rocha Rev.: WDHT-03-2000/04 A4 (ASIT) Copyright 1998, 1999, 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra

Leia mais

BURIPACK - DESIGN E INTERFACES WEB

BURIPACK - DESIGN E INTERFACES WEB 1 de 5 BURIPACK - DESIGN E INTERFACES WEB BC 41 LÓGICA DE PROGRAMAÇÃO COM JAVASCRIPT E HTML (32h) Ajudar aos alunos no desenvolvimento do raciocínio lógico, a partir da prática em lógica de programação,

Leia mais

CRIAÇÃO DE SITES (AULA 9)

CRIAÇÃO DE SITES (AULA 9) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 9) Cor do primeiro plano: a propriedade 'color' A propriedade color define a cor

Leia mais

Fundamentos de Ajax e o Modelo DOM

Fundamentos de Ajax e o Modelo DOM Fundamentos de Ajax e o Modelo DOM Introdução O Ajax é uma nova tecnologia em ascensão e, embora o Ajax seja incontestavelmente atual, ele não é realmente novo. Ajax não é por si só tecnologia, mas sim

Leia mais

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets Introdução CSS - Cascading Style Sheets Padrão de Apresentação de Documentos CSS Cascate Style Sheets Objetivos: Conhecer o Histórico; Conhecer a Usabilidade; Por que usar? Quando usar? Como usar? Conhecer

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15 2 Customização Intermediário Com a definição do posicionamento

Leia mais

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) 7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

Aprenda a construir com menos tempo e esforco layouts para web

Aprenda a construir com menos tempo e esforco layouts para web Aprenda a construir com menos tempo e esforco layouts para web Sumário Apresentação 10 Capítulo #1 - Ferramentas necessárias para o desenvolvimento 22 Capítulo #2 - Afinal, o que é HTML? 26 A evolução

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Novo projeto com NetBeans A partir de hoje, vamos trabalhar com projetos no NetBeans

Leia mais

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 2 Técnico Prof. Cesar 2014 1 1. CSS CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,

Leia mais

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript

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

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

Afinal o que é HTML?

Afinal o que é HTML? Aluno : Jakson Nunes Tavares Gestão e tecnologia da informacão Afinal o que é HTML? HTML é a sigla de HyperText Markup Language, expressão inglesa que significa "Linguagem de Marcação de Hipertexto". Consiste

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Aprofundando nos elementos básicos do HTML; --Criando Hiperlinks em HTML; 2 Estrutura básica de um documento

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta útima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes Yahoo! Mail

Leia mais

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral Apostila retirada de http://www.ibestmasters.com.br DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral A tecnologia DHTML (Dynamic HTML) foi apresentada inicialmente como um conjunto

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Posicionamento e Layout com CSS

Posicionamento e Layout com CSS Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto

Leia mais

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. Apresentar as principais características das

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Estrutura da Página

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Estrutura da Página IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo EstruturadaPágina ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo EstruturadaPágina

Leia mais

Plano de Trabalho Docente 2014. Ensino Técnico

Plano de Trabalho Docente 2014. Ensino Técnico Plano de Trabalho Docente 2014 Ensino Técnico ETEC PROF. MASSUYUKI KAWANO Código: 136 Município: TUPÃ Eixo Tecnológico: INFORMAÇÃO E COMUNICAÇÃO Habilitação Profissional: TÉCNICA DE NÍVEL MÉDIO DE TÉCNICO

Leia mais

css Cascading Style Sheets CSS CASCADING STYLE SHEETS

css Cascading Style Sheets CSS CASCADING STYLE SHEETS css Cascading Style Sheets CSS CASCADING STYLE SHEETS Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação

Leia mais

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender

Leia mais

CSS (Style Sheets - Folhas de Estilo)

CSS (Style Sheets - Folhas de Estilo) Anuncie nesse espaço da Aprendendo HomePage, clique aqui e veja como e porque. CSS (Style Sheets - Folhas de Estilo) CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Vc já deve ter visto esses

Leia mais

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,

Leia mais

Facilidade e flexibilidade na web

Facilidade e flexibilidade na web Facilidade e flexibilidade na web palavras-chave: acessibilidade, usabilidade, web 2.0 Tersis Zonato www.tersis.com.br Web 2.0 o termo de marketing x a nova forma de conhecimento Web 2.0 O conceito começou

Leia mais

Conceitos Web. Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Notas de Aula Aula 13 1º Semestre - 2011. UNIJUÍ DETEC Ciência da Computação

Conceitos Web. Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Notas de Aula Aula 13 1º Semestre - 2011. UNIJUÍ DETEC Ciência da Computação UNIJUÍ DETEC Ciência da Computação Prof. Msc. Juliano Gomes Weber (jgw@unijui.edu.br) Conceitos Web Notas de Aula Aula 13 1º Semestre - 2011 Tecnologias Web jgw@unijui.edu.br Conceitos Básicos Sistema

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Web Design Aula 01. No Caderno Responda as Questões abaixo

Web Design Aula 01. No Caderno Responda as Questões abaixo Aula 01 1 O que é Web Design? 2 Qual a diferença entre Web Design e Web Designer? 3 O que são Sites ou Páginas? Cite 3 tipos de Sites. 4 O que é um Navegador? 5 O que são Servidores e o que são Protocolos?

Leia mais

Universidade Da Beira Interior

Universidade Da Beira Interior 1 Universidade Da Beira Interior Sistemas Distribuídos e Tolerância a Falhas Estudo da Tecnologia jquery Tiago Simões m3965 João Pereira m3873 12 De Março de 2011 2 Conteúdo 1. Apresentação da tecnologia...

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

Computação na Internet HTML&CSS - Exercícios. Dicas para criação de conteúdos em HTML

Computação na Internet HTML&CSS - Exercícios. Dicas para criação de conteúdos em HTML Dicas para criação de conteúdos em HTML Apresentam-se de seguida algumas dicas para autores de conteúdos em HTML. Ao utilizar estas dicas, a manutenção das páginas ficará facilitada, ficarão mais apresentáveis

Leia mais