Unidade: O que é CSS? HTML e CSS? Boa aula!!!
|
|
- Rebeca Dinis Paranhos
- 8 Há anos
- Visualizações:
Transcrição
1 Unidade: O que é CSS? HTML e CSS? Boa aula!!!
2 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
3 Orientações Durante a explanação anote as possíveis dúvidas; Após a explanação teremos um tempo para tirar as dúvidas; Caso, ainda, surjam dúvidas após o término da aula, será possível resolvê-las pelo fórum do blackboard.
4 Retorno das Atividades e Avaliação Leia, com atenção, o que foi determinado como atividade desta primeira aula; No documento, esta descrito a pontuação para cada atividade.
5 Vamos começar!!! Interface Humano Computador II
6 Ferramentas para desenvolvimento Muito embora estejamos criando nossas aplicações em bloco de notas lembro que podem criar suas atividades com qualquer outro edito HTML. Editores mais conhecidos: Adobe Dreamweaver Adobe GoLive Bluefish Edit Plus Microsoft Expression Web Microsoft Frontpage Mozilla Composer FirstPage
7 QUE É CSS? Cascading Style Sheet ou Folha de Estilo em Cascata O CSS é uma linguagem que nos permite adicionar estilos as nossas páginas, em outras palavras, seria a formatação visual (aparência, layout) das páginas como tipo de fonte, cores, espaçamentos, entre outros. A W3C (World Wide Web Consortium) já está desenvolvendo a versão 3 do CSS, nós estaremos utilizando a versão CSS 2 Em linhas gerais, a versão CSS 2 contém toda a especificação do CSS 1 e obviamente alguns acréscimos, isso também irá se aplicar a versão CSS 3 que irá conter as especificações do CSS 2. Com o uso do CSS diminuímos o trabalho devido a possibilidade de reutilização dos estilos em diferentes tags e principalmente em diferentes páginas.
8 Vantagens do CSS? No passado, a tag <H1> em quase todos os web sites parecia a mesma - texto preto era consideravelmente maior que o corpo do texto normal. Se você quisesse fazer seus próprios títulos diferenciados, tinha de formatar cada tag de título individualmente, utilizando tags <FONT> ou similares. Se mais tarde mudasse aparência desses títulos, tinha de voltar e mudar cada título individualmente. Ou seja: um processo lento e trabalhoso. Com uma folha de estilo, você pode fazer uma "declaração global", como "quero que todos os meus títulos <H1> sejam verdes".
9 Vantagens do CSS? Com uma folha de estilo, você pode fazer uma "declaração global", como "quero que todos os meus títulos <H1> sejam verdes". É declarado somente uma vez e cada título <H1> em seu site será verde. Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag <H1> para a cor azul. Basta alterar o estilo - a "regra" - para "quero que todos os meus títulos <H1> sejam azuis" e pronto! Obviamente você não está limitado a títulos e nem a cor azul. Outra vantagem das folhas de estilo é que é possível definir um estilo personalizado para cada elemento de design em seu web site, incluindo títulos, lista, tabelas e imagens, etc. Além de definir uma cor, você pode definir a fonte, o tamanho, o alinhamento, a espessura da borda, e assim por diante.
10 Alguns termos atuais Tableless? Web Standards? Atualmente o desenvolvimento web se preocupa em utilizar estruturas padronizadas mundialmente, no início esse movimento foi chamado por alguns de Tableless (somente um nome para algo já existente, assim como o AJAX), o termo Tableless significou em não usar tabelas para a construção de layout, mas isso vai mais além. Hoje esse termo é pouco comentado, pois deu lugar a algo maior e mais profissional, que seria os chamados Web Standards, ou Padrões Web. Padrões Web podem ser definidos como normas que determinam o uso correto das diversas tecnologias disponíveis para o desenvolvimento Web.
11 Alguns termos atuais cont... Tableless? Web Standards? Devemos utilizar as linguagens com seus propósitos iniciais, como por exemplo, o HTML para estruturar o conteúdo e o CSS para formatar esse conteúdo. Sites que seguem esses padrões, ficam mais baratos, possibilitam uma maior facilidade em sua manutenção e podem ser acessados em diferentes tipos de dispositivos. Não se usa tabelas para criação do layout das páginas hoje, pois tabelas são para montar dados tabulares, em seu lugar, usamos as folhas de estilo CSS.
12 Como inserir o CSS? Antes de aprendermos os diversos tipos de formatação CSS de um documento HTML, devemos aprender quais as três formas possíveis de inserir um estilo CSS em nossas páginas. As três formas de inserir um estilo CSS em uma página são: CSS externo CSS incorporado CSS inline
13 Como inserir o CSS? Toda a configuração de formatação fica dentro de um arquivo.css que é chamado no cabeçalho do documento html com a tag link Ex: <link rel="stylesheet" href="estilo.css" type="text/css" /> As configurações definidas no arquivo estilo.css valem para todas as páginas que fazem referência ao arquivo.
14 Como inserir o CSS externo Exemplo1.html Aqui, estamos chamando o arquivo que contêm o estilo. Obs: neste caso o arquivo Exemplo1estilo.css está no mesmo diretório que o arquivo Exemplo.html <html> <head> <title> Teste CSS externo </title> <link rel="stylesheet" href="exemplo1estilo.css" type="text/css" /> </head> <body> <p> um parágrafo de exemplo </p> </body> </html> Temos ao lado o arquivo Exemplo1estilo.css que será chamado no arquivo acima Exemplo1.html Exemplo1estilo.css p { font-family: "verdana"; color: 00ff00; }
15 Exemplo
16 Como inserir o CSS incorporado Todas as configurações ficam dentro do cabeçalho (HEAD) da página e são delimitadas pelas tags <style>...</style> As configurações valem para a página inteira. Este tipo de CSS não permite a reutilização como o CSS externo. Exemplo incorporado : <html><head> <title> Teste CSS incorporado </title> <style type="text/css"> p { font-family: "verdana"; color: 0000ff; } </style> </head> <body> <p> um parágrafo de exemplo </p> </body> </html> Aqui, estamos chamando o estilo dentro do código html Exemplo2incorporado.html
17 Exemplo
18 CSS inline As configurações são feitas diretamente na tag, logo, a formatação é específica ao marcador. Para acrescentar esse tipo de CSS utilizamos o atributo style na tag. Use este tipo de estilo com moderação pois ele mistura conteúdo com apresentação e não permite nenhum tipo de reuso. Exemplo inline: <html> <head> <title> Teste CSS inline </title> </head> <body> <p style="font-family:verdana;color:00ff00"> um parágrafo de exemplo </p> </body> </html> Exemplo3inline.html
19 Exemplo
20 CSS Se por acaso você tentar utilizar os três tipos de inserção CSS em um documento HTML, o mesmo obdece uma prioridade entre eles, conforme demonstrado abaixo: 1- CSS inline 2- CSS incorporado 3- CSS externo 4- HTML Na figura acima, o CSS inline sobrepõe aos demais estilos, caso este não exista, o CSS interno sobrepõe o externo e assim ocorre com as demais variações.
21 Sintaxe do CSS Podemos definir as folhas de estilo de diversas maneiras: Para um elemento específico Para um grupo de elementos Para um elemento específico dentro de uma sequência de elementos Para uma ou mais classes pertencentes a um elemento Para classes genéricas Para estilos individuais Referência: Material de apoio de TIA professores Alcides Ana e Luíz Reis
22 Sintaxe do CSS (para um elemento) Podemos definir nossos estilos para qualquer elemento do HTML. Sintaxe: elemento { propriedade: valor} Tag HTML Atributo que queremos modificar Valor da propriedade A propriedade e o seu respectivo valor são separados por : (dois pontos) Se o valor da propriedade tiver mais de uma palavra, devemos utilizar (aspas) Quando inserimos mais de uma propriedade, temos que utilizar ; (ponto e vírgula) para separá-las.
23 Exemplos p { color:blue} b { color:red; font-family: verdana; } i { color:red; font-family: sans serif ; } Um padrão que é utilizado para a criação dos estilos é inserir uma propriedade em cada linha, isso facilita a leitura posterior. body { } color:green; font-family: sans serif ; <html> <head> <title>exemplo</title> <style type="text/css"> p { color:blue} b { color:green; font-family: verdana; } i { color:red; font-family: "sans serif"; } body { color:brown; font-family: "sans serif"; } </style> </head> <body> <p> parágrafo </p> <b> negrito</b><br /> <i> itálico </i><br /> Texto do body. </body> </html> Exemplo4inline.html
24 Exemplo
25 Sintaxe do CSS (para um grupo de elementos) Podemos definir configurações para um grupo de tags, para isso, devemos separá-las com, (vírgula) Ex: h1, h2, p { color:#ff0000; font-family: verdana; text-align:center; } Separamos cada elemento com a vírgula
26 <html><head> <title>exemplo</title> <style type="text/css"> p, h1, h2 { color:ffff00; font-family:verdana; text-align:center; } Exemplos body { color:00aaff; font-family: "sans serif"; } </style> </head> <body> <p> exemplo de parágrafo </p> <h1> exemplo de H1 </h1> <h2> exemplo de H2 </h2> exemplo do texto no body. </body> Não podemos esquecer de fechar as chaves{ } para delimitar o bloco do estilo CSS </html> Exemplo5.html
27 Exemplo
28 Sintaxe do CSS (Para um elemento específico dentro de uma sequência de elementos) Caso necessário, é possível definir a configuração para um elemento (tag) que está dentro de uma certa sequência de outros elementos (hierarquia). Ex: div p { color:blue:} Neste exemplo somente a tag P que estiver dentro da tag DIV receberá essa configuração p b {color: red} Neste outro, somente a tag b que estiver dentro da tag P receberá essa configuração. Separamos a sequência de tags com espaço.
29 Exemplos <html> <head> <title>exemplo</title> <style type="text/css"> div p { color:blue; font-size:40;} p b { color:red; font-size:40;} </style> </head> <body> <div><p> parágrafo dentro da div </p></div> <p> parágrafo fora da div </p> <b> negrito normal </b> <p><b> negrito dentro da tag p </b></p></body> </html> Não podemos esquecer de fechar as chaves{ } para delimitar o bloco do estilo CSS Exemplo6.html
30 Exemplo
31 Sintaxe CSS (Para uma ou mais classes pertencentes a um elemento) Uma classe pode ser associada a um elemento (tag), com isso, podemos aplicar diferentes formatos no mesmo elemento, bastando chamar as respectivas classes. Neste modelo, a classe só pode ser chamada no elemento que está associada, logo não funcionará em outro elemento. Para utilizar uma classe em um marcador, acrescentamos o atributo class. Sintaxe: elemento.nome_da_classe { propriedade: valor} Tag HTML Nome da classe Atributo que queremos modificar Valor da propriedade
32 Exemplos <html> <head> <title>exemplo</title> <style type="text/css"> p.cor_verde { color:#00ff00; font-family:verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:20px; } </style> </head> <body> <p> Primeiro parágrafo sem formatação </p> <p class="cor_verde"> Segundo parágrafo com formatação</p> <i class="cor_verde"> Texto em itálico </i><br /> Texto do body. </body> </html> Não aplica o estilo porque a classe cor_azul está associada a tag P e não a tag i. Cria a classe cor_verde para o elemento P. Podemos criar mais de uma classe para o mesmo elemento, basta criar nomes diferentes para cada classe. Aplica a classe cor_verde na tag. Veja que para aplicar o estilo, devemos chamar a classe com o atributo class. Exemplo7.html
33 Exemplo
34 Sintaxe CSS (Para classes genéricas) Podemos também criar classes genéricas (não estão associadas a nenhum elemento) que podem ser aplicadas a qualquer elemento do HTML, sempre que for necessário, assim, uma classe pode ser usada várias vezes em um mesmo documento. Para utilizar uma classe em um marcador, acrescentamos o atributo class. Sintaxe:.nome_da_classe { propriedade: valor} Nome da classe Iniciamos com um ponto Atributo que queremos modificar Valor da propriedade
35 Exemplos <html> <head> Cria a classe cor_azul <title>exemplo</title> genérica, logo, pode ser usada <style type="text/css"> em qualquer tag do HTML..cor_verde {color:#00ff00; font-family:verdana, Arial, Helvetica, sans-serif; font-weight:bold; } </style> </head> <body> <p> Primeiro parágrafo sem formatação </p> <p class="cor_verde"> Segundo parágrafo com formatação</p> <i class="cor_verde"> Texto em itálico </i><br /> Texto do body. </body> </html> Aplica a classe cor_azul na tag p e na tag i. Veja que para aplicar o estilo, devemos chamar a classe Exemplo8.html
36 Exemplo
37 Sintaxe CSS (Para estilos individuais) Assim como as classes genéricas, os estilos individuais podem ser aplicados a qualquer elemento do HTML, a diferença é que esses estilos são únicos, logo, só podem ser utilizados uma única vez dentro do mesmo documento. São utilizados também para identificar um elemento HTML para posteriormente ser manipulado através da linguagem JavaScript. Este estilo é a identificação da tag Para utilizar um estilo individual em um marcador, acrescentamos o atributo id. Sintaxe: #nome_do_id { propriedade: valor} Nome da classe Iniciamos com # Atributo que queremos modificar Valor da propriedade
38 Exemplos <html> <head> <title>exemplo</title> <style type="text/css"> #cor_verde { color:#00ff00; font-family:verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:20px; } </style> </head> <body> <p> Primeiro parágrafo sem formatação </p> <p id="cor_verde"> Segundo parágrafo com formatação</p> <i id="cor_verde"> Texto em itálico com formatação</i><br /> Texto do body. </body> </html> Aplica o id cor_verde na tag p. Veja que para aplicar o estilo, devemos chamar o identificador com o atributo id. Cria a classe cor_azul genérica, logo, pode ser usada em qualquer tag do HTML. Exemplo9.html
39 Exemplo
40 Observações importantes do CSS Podemos criar estilos para uma tag, grupo de tags ou tags em um sequência específica. Podemos criar classes de estilos para definir diferentes estilos para a mesma tag. Podemos criar classes genéricas que podem ser aplicadas a qualquer tag do HTML, essas classes podem ser usadas mais de uma vez dentro do documento. Para acioná-la, usamos o atributo class na tag. Podemos criar um estilo individual que aplica um estilo e identifica uma tag do HTML, está forma de estilo só pode ser usada uma vez dentro do documento. Para acioná-lo, usamos o atributo id na tag. Podemos ter em uma mesma tag, os atributos class e id. Ao chamar a classe em uma tag com o atributo class, colocamos somente o nome da classe, ou seja, na chamada da classe, não utilizamos o ponto. O mesmo ocorre quando chamamos o estilo individual com o atributo id, também não inserimos o #, somente o nome do estilo.
41 Comentários no código CSS Como geralmente os arquivos com CSS possuem muitas configurações, é interessante você inserir comentários descrevendo o que cada bloco de estilo faz. Para isso usamos /*...*/ Exemplo <style type= text/css > /*Cria um id chamado cor_azul*/ #cor_azul { color:blue} </style> A utilização de comentários em CSS é muito importante, pois ajuda a identificar os vários estilos que possam existir.
42 Tag DIV e tag SPAN Os estilos CSS feitos até o momento, foram aplicados a tags do HTML que já possuem um formato padrão inicial, como por exemplo a tag B que deixa o texto em negrito. Porém, existem situações em que precisamos de tags limpas, sem formatação padrão, para estes casos, temos a disposição a tag DIV e a tag SPAN. A diferença entre elas é que a tag DIV aplicada uma quebra de linha antes e depois do texto e a tag SPAN não. A tag DIV é muito utilizada na criação de layouts das páginas e áreas para conteúdos, já a tag SPAN é utilizada para aplicar configurações dentro do conteúdo, isso devido ao fato de não possuir nenhum formato pré-definido. Ambas as tags aceitam o uso de classes (class) e estilos individuais (id), também aceitam o uso de ambos os atributos.
43 Exemplos <html><head> <title>exemplo</title> <style type="text/css">.caixa { border: 3px solid #0000ff;/*cor da borda*/ background-color: #ff00ff; color:#00ff00; font-family:verdana, Arial, Helvetica, sans-serif; font-weight:bold; } #aviso { width: 100px; height:100px; } </style> </head> <body> <p> Primeiro parágrafo </p> <div> Utilizando a tags div, sem formatação</div> <div class="caixa" id="aviso"> Utilização da tag div, com formatação</div> <br /> <span>texto com a tag span, não faz nada.</span>. <br /> <span class="caixa">texto com a tag span e classe de estilo, faz algo.</span> </body> </html> Utilizando os atributos class e id Faz uso da classe caixa. Exemplo10.html
44 Exemplo
45 Bibliografia Materiais das aulas de TIA1 da Universidade Cruzeiro do Sul dos professores: Alcides Teixeira Barboza Jr Ana Paula Galvão Damasceno Carrare Cristiane Pires Camilo Douglas Almendro Ivan Carlos Alcantara De Oliveira Leonardo Carlos Comotti Kasperavicius Luiz Carlos Reis
46 Responsável pelo Conteúdo: Prof.Ms. Douglas Almendro Revisão Textual: Profª Esp. Márcia Ota Campus Liberdade R. Galvão Bueno, São Paulo SP Brasil T F
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 maisHTML 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 maisWeb 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 maisMudanç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 maisCSS é 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 maisTECNOLOGIAS 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 maiscss 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 maisIntroduçã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 maisCurso 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 maisAula 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 maisSIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar estilos em HTML com CSS Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte
Leia maisWeb 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 maisMANUAL 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 maisWeb 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 maisProfessor: 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 maisCabeçalho do documento
Cabeçalho do documento O cabeçalho de uma página HTML fica dentro das Tags e , e dentro dessas Tags podemos usar Tags , , , , e etc. A Tag TITLE Por exemplo
Leia maisSumá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 maisCRIAÇÃO DE SITES (AULA 7)
Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 7) CSS significa CascadingStyleSheetes(Folhas de Estilo em Cascata). Não seria ótimo
Leia maisInternet 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 maisDesenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de
Leia maisDWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico
DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico CSS3 - Fundamentos E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual
Leia maisIntroduçã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 maisHTML5. 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
Leia maismkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Leia maisPRINCÍPIOS DE INFORMÁTICA PRÁTICA 06 1. OBJETIVO 2. BASE TEÓRICA 3. SEQÜÊNCIA DA AULA. 3.1 Iniciando o PowerPoint
PRINCÍPIOS DE INFORMÁTICA PRÁTICA 06 1. OBJETIVO Apresentar o PowerPoint, que é o software para montar apresentações na forma de slides da Microsoft. Isso será feito seguindo-se uma seqüência mostrando
Leia maisIntroduçã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 maisHTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).
HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a
Leia maisAula 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
Leia maisTABLELESS 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
Leia maisDesenvolvimento 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 maisDOCUMENTAÇÃO DO FRAMEWORK - versão 2.0
DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando
Leia maisAula 01 - Formatações prontas e condicionais. Aula 01 - Formatações prontas e condicionais. Sumário. Formatar como Tabela
Aula 01 - Formatações prontas e Sumário Formatar como Tabela Formatar como Tabela (cont.) Alterando as formatações aplicadas e adicionando novos itens Removendo a formatação de tabela aplicada Formatação
Leia maisVejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :
TABELAS As tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz
Leia maisConstrutor de sites SoftPixel GUIA RÁPIDO - 1 -
GUIA RÁPIDO - 1 - Sumário Introdução...3 Por que utilizar o Construtor de Sites?...3 Vantagens do Construtor de Sites...3 Conceitos básicos...3 Configuração básica do site...5 Definindo o layout/template
Leia maisWebdesign 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 maisPosicionamento 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 maisSUMÁRIO 1. AULA 6 ENDEREÇAMENTO IP:... 2
SUMÁRIO 1. AULA 6 ENDEREÇAMENTO IP:... 2 1.1 Introdução... 2 1.2 Estrutura do IP... 3 1.3 Tipos de IP... 3 1.4 Classes de IP... 4 1.5 Máscara de Sub-Rede... 6 1.6 Atribuindo um IP ao computador... 7 2
Leia maisBarra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas
Microsoft Power Point 2003 No Microsoft PowerPoint 2003, você cria sua apresentação usando apenas um arquivo, ele contém tudo o que você precisa uma estrutura para sua apresentação, os slides, o material
Leia maisAplicativos 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 maisQUEM 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 maisCSS -Cascading Style Sheets - Introdução
CSS -Cascading Style Sheets - Introdução Como surgiu a tecnologia CSS? De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução
Leia maisPassa 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 maisAcessibilidade no SIEP (Sistema de Informações da Educação Profissional e Tecnológica) Módulo de Acessibilidade Virtual CEFET Bento Gonçalves RS Maio 2008 ACESSIBILIDADE À WEB De acordo com Cifuentes (2000),
Leia maisRoteiro 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 maisDefinindo 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 maisWEBDESIGN. 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
Leia maisCRIANDO TEMPLATES E LEGENDAS
CRIANDO TEMPLATES E LEGENDAS Este tutorial tem como objetivo instruir passo à passo como criar templates de peças, utilizar os novos recursos de cadastro de propriedade de peças e criação de legenda. 1-
Leia maisCENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA ETEC PROF. MÁRIO ANTÔNIO VERZA CURSO TÉCNICO EM INFORMÁTICA PARA INTERNET
CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA ETEC PROF. MÁRIO ANTÔNIO VERZA CURSO TÉCNICO EM INFORMÁTICA PARA INTERNET WEBSITE MUNDO MULHER GABRIELA DE SOUZA DA SILVA LUANA MAIARA DE PAULA SILVA
Leia maisDesenvolvendo Websites com PHP
Desenvolvendo Websites com PHP Aprenda a criar Websites dinâmicos e interativos com PHP e bancos de dados Juliano Niederauer 19 Capítulo 1 O que é o PHP? O PHP é uma das linguagens mais utilizadas na Web.
Leia maisneste 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 maisTECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD
TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de páginas Web. Compreender as principais funcionalidades de cada tag utilizada.
Leia mais> 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 mais02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
Leia maisINTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz
INTRODUCAO DESENVOLVIMENTO E DESIGN DE INTRODUÇÃO INTRODUÇÃO A linguagem HTML (Hipertext Markup Language Linguagem de Marcação de Hipertexto) é usada para divulgar páginas na World Wide Web, o serviço
Leia maisANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007
ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007 CURITIBA 2015 2 SUMÁRIO INTRODUÇÃO AO MICROSOFT POWERPOINT 2007... 3 JANELA PRINCIPAL... 3 1 - BOTÃO OFFICE... 4 2 - FERRAMENTAS DE ACESSO
Leia maisTrecho retirando do Manual do esocial Versão 1.1
Trecho retirando do Manual do esocial Versão 1.1 A rotina de acesso direto ao XML do S-1000, o usuário pode encontrar na opção de cadastro de Empresas do SIP. Sempre que o usuário localizar a figura ao
Leia maisCONCEITOS INICIAIS. Agenda A diferença entre páginas Web, Home Page e apresentação Web;
CONCEITOS INICIAIS Agenda A diferença entre páginas Web, Home Page e apresentação Web; O que é necessário para se criar páginas para a Web; Navegadores; O que é site, Host, Provedor e Servidor Web; Protocolos.
Leia maisWeb 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 maisEXEMPLO DE COMO FAZER UMA MALA DIRETA
EXEMPLO DE COMO FAZER UMA MALA DIRETA OBS: Para esta nota de aula foi utilizada como referência: Apostila Mala Direta Santos, Jorge Rodrigues dos. Foram adaptados os comando para utilizar mala direta no
Leia maisIntroduçã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
Leia maisAula 04 Word. Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/
Aula 04 Word Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/ Agenda da Aula Editor de Texto - Word Microsoft Office Conjunto de aplicativos para escritório que contém programas
Leia maisTutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br)
Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Introdução A HyperText Markup Language e a Web No núcleo de toda página da Web, encontramos a HyperText Markup
Leia maisMANUAL 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 maisVISUAL LIGHTBOX FERRAMENTA WEB DESIGN FABIANO KEIJI TAGUCHI
VISUAL LIGHTBOX FERRAMENTA WEB DESIGN FABIANO KEIJI TAGUCHI ESTE MATERIAL TEM UM OBJETIVO DE COMPLEMENTAR OS ASSUNTOS ABORDADOS DENTRO DE SALA DE AULA, TORNANDO-SE UM GUIA PARA UTILIZAÇÃO DA FERRAMENTA
Leia maisManual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web
Manual do Publicador Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Sumário Painel de Administração... 3 1 - Inserção de post... 5 2 Publicação de post com notícia na área headline (galeria de
Leia maisDiazo. Módulo 7 Tema Diazo
Diazo Módulo 7 Tema Diazo Diazo >> O que é? É uma ferramenta para criação de temas. Permite que o designer construa um tema puramente HTML, sem se preocupar com as particularidades do Plone. Funciona através
Leia maisConstrução Páginas de Internet
Construção Páginas de Internet Definir um Site no Frontpage Objectivos da sessão: No final da sessão os formandos deverão ser capazes de: Saber o que são os metadados do Frontpage; Distinguir entre Sites
Leia maisAdapti - Technology Solutions www.adapti.net Leonor cardoso nº 331 Fone : (041) 8844-7805 81240-380 Curitiba - PR MANUAL DO USUÁRIO
MANUAL DO USUÁRIO 1 Índice Administração de Documentos...2 Lista de documentos criados...3 Criando um novo documento...3 Barra de ferramentas do editor...4 Editando um documento...7 Administrando suas
Leia maisPLANNER CONSULTORIA E SISTEMAS
Índice Adicionando a tag HTML em seu site Pág. 1 Customização da aparência da tag HTML Pág. 2 Passando valores para os campos do formulário do cliente no P-Atendimento Pág. 2 Passando valores dinâmicos
Leia maisUtilizando a ferramenta de criação de aulas
http://portaldoprofessor.mec.gov.br/ 04 Roteiro Utilizando a ferramenta de criação de aulas Ministério da Educação Utilizando a ferramenta de criação de aulas Para criar uma sugestão de aula é necessário
Leia maisWEBDESIGN. 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 maisCriando um script simples
Criando um script simples As ferramentas de script Diferente de muitas linguagens de programação, você não precisará de quaisquer softwares especiais para criar scripts de JavaScript. A primeira coisa
Leia maisMicrosoft Office PowerPoint 2007
INTRODUÇÃO AO MICROSOFT POWERPOINT 2007 O Microsoft Office PowerPoint 2007 é um programa destinado à criação de apresentação através de Slides. A apresentação é um conjunto de Sides que são exibidos em
Leia mais#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
Leia maisApostila de PowerPoint 2013
Iniciando o Power Point 2013...01 Nova apresentação baseada no modelo...01 Escolhendo o esquema de cores do fundo do slide manualmente...02 Modificando o layout do slide... 03 Inserindo textos no slide...
Leia maisBem- Vindo ao manual de instruções do ECO Editor de COnteúdo.
Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar
Leia maisALBUM DE FOTOGRAFIAS NO POWER POINT
ALBUM DE FOTOGRAFIAS NO POWER POINT O PowerPoint é uma poderosa ferramenta que faz parte do pacote Office da Microsoft. O principal uso desse programa é a criação de apresentação de slides, para mostrar
Leia maisÍNDICE... 2 POWER POINT... 4. Abas... 7 Salvando Arquivos... 8 Abrindo um arquivo... 11 LAYOUT E DESIGN... 13
Power Point ÍNDICE ÍNDICE... 2 POWER POINT... 4 Abas... 7 Salvando Arquivos... 8 Abrindo um arquivo... 11 LAYOUT E DESIGN... 13 Guia Design... 14 Cores... 15 Fonte... 16 Efeitos... 17 Estilos de Planos
Leia maisHTML. (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 maisLINGUAGEM 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 maisDESENVOLVIMENTODE APLICAÇÕESPARAINTERNET:PHP. VitorFariasCoreia
DESENVOLVIMENTODE APLICAÇÕESPARAINTERNET:PHP VitorFariasCoreia INFORMAÇÃOECOMUNICAÇÃO Autor Vitor Farias Correia Graduado em Sistemas de Informação pela FACITEC e especialista em desenvolvimento de jogos
Leia maisManual de utilização do sistema de envio de sms marketing e corporativo da AGENCIA GLOBO. V 1.0. www.sms.agenciaglobo.net
Manual de utilização do sistema de envio de sms marketing e corporativo da AGENCIA GLOBO. V 1.0 www.sms.agenciaglobo.net 1 ACESSO O SISTEMA 1.1 - Para acessar o sistema de envio entre no site http://sms.agenciaglobo.net/
Leia maisWebdesign 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 é
Leia maisPHP Material de aula prof. Toninho (8º Ano)
Na aula anterior entendemos como se faz o acesso aos nossos arquivos PHP; Como construir um script em php. Nesta aula (3) vamos entender: Como roda o PHP Inserindo comentários Visualizando páginas a partir
Leia maisA figura abaixo, à direita, mostra uma apresentação gerada no MS PowerPoint. Uma apresentação desse tipo é útil para:
INTRODUÇÃO AO POWERPOINT 16.1 Objetivo Apresentar o PowerPoint, o software para montar apresentações na forma de slides da Microsoft. Isso será feito obedecendo-se a uma seqüência que demonstre como montar
Leia maisDESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza
DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO Profº Ritielle Souza Web design responsivo Mas, o que é Web Design Responsivo? O Wiki diz o seguinte (tradução livre): Web Design Responsivo (RWD), essencialmente
Leia maisCurso LibreOffice - Apostila de Exercícios
Exercício 1 1. Crie um novo documento e digite: Testando 2. Salve-o em algum local de fácil acesso e que seja de sua preferência com o nome Doc1. 3. Acrescente o texto Salvar Como ao final do texto escrito
Leia maisIntrodução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Elementos Textuais Básicos
IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo ElementosTextuaisBásicos ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo
Leia maisCriação de Formulários
iq2 Criação de Formulários Formulários são os questionários formatados no software Sphinx para coleta de dados, que contêm opções avançadas de edição, organização e personalização. Ao utilizarmos o formulário
Leia maisTé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 maisTUTORIAL DO ACCESS PASSO A PASSO. I. Criar um Novo Banco de Dados. Passos: 1. Abrir o Access 2. Clicar em Criar um novo arquivo
TUTORIAL DO ACCESS PASSO A PASSO I. Criar um Novo Banco de Dados Passos: 1. Abrir o Access 2. Clicar em Criar um novo arquivo 3. Clicar em Banco de Dados em Branco 4. Escrever um nome na caixa de diálogo
Leia maisCOLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS
COLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS CURITIBA 2014 2 Conteúdo Definição:... 2 Detalhando a tela:... 4 BARRA DE FERRAMENTAS DESENHO... 4 PREENCHIMENTOS... 5 RÉGUAS E GUIAS...
Leia maisManual de criação de envios no BTG360
Manual de criação de envios no BTG360 Série manuais da ferramenta ALL in Mail Introdução O BTG 360 utiliza a tecnologia do behavioral targert para que você alcance resultados ainda mais assertivos com
Leia maisScriptlets e Formulários
2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,
Leia maisManual do Painel Administrativo
Manual do Painel Administrativo versão 1.0 Autores César A Miggiolaro Marcos J Lazarin Índice Índice... 2 Figuras... 3 Inicio... 5 Funcionalidades... 7 Analytics... 9 Cidades... 9 Conteúdo... 10 Referência...
Leia mais