texto efeitos de texto fontes Helder da Rocha

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

Download "texto efeitos de texto fontes Helder da Rocha (helder@argonavis.com.br)"

Transcrição

1 texto efeitos de texto fontes Helder da Rocha

2 Texto Pode ser desenhado com o elemento <text> Atributos e sub- elementos permitem controle sobre muitos aspectos do texto e caracteres individuais Dimensões, espaçamento, rotação, etc. Pode ser desenhado na ver=cal, na diagonal, em caminhos arbitrários (associado a um <path>) Assim como ocorre com as figuras, pode- se aplicar cor, filtros, gradientes, padrões, clipping, etc. Amplo suporte para acessibilidade e internacionalização Especificação h7p://www.w3.org/tr/svg/text.html 2

3 Baseline As coordenadas iniciais de um elemento de texto não ficam no canto superior esquerdo como as figuras A posição exata depende de fatores culturais (idioma), da natureza do texto (alfabé=co, matemá=co, etc.) Âncora default tem origem na linha base (baseline) para textos la=nos alfabé=cos Tanto o retângulo abaixo como o texto têm as mesmas coordenadas x,y <svg... viewbox=" "> <rect x="0" y="0" height="36" width="180"... /> <text font- size="36" x="0" y="0">agora</text> </svg> Posição (0,0) só esta parte será visível se viewbox começar em 0,0 3

4 Fontes Associadas a texto através de atributos de es=lo em <text> ou elementos mais altos na hierarquia (ex: <g>) Podem ser aplicados via XML ou CSS São iden=ficadas pelo nome O atributo font- family permite especificar uma lista de nomes: caso o primeiro não seja encontrado, será usado o segundo, e assim por diante Há nomes default como sans- serif, serif, monospace Há vários atributos para controlar aspectos de fontes, como peso, inclinação, tamanho, etc Mesmas propriedades do CSS 2 e mesma sintaxe Na ausência de uma fonte, o texto é desenhado em uma fonte default, como serif 4

5 Atributos de es=lo para fontes font- family Um ou mais nomes de fonte separados por vírgula font- size Podem ser especificados tanto em XML (como atributos próprios) como em CSS (dentro de folhas de esklo, blocos <style> ou atributos style) rela%vo ao viewbox, ou com unidades absolutas: pt, cm, in, px, em, ex, pc font- weight peso: bold, light, 100, 200,..., 900 font- style esklo de grifo: italic, oblique font- variant variação: small- caps font- stretch normal, condensed, etc. Expande ou condensa a fonte font Atalho para especificar várias propriedades de uma vez 5

6 Fontes embu=das e SVG Fonts Fontes do sistema não podem ser embu=das em SVG Mas é possível definir fontes em SVG, que podem ser referenciadas por arquivos CSS ou SVG Elemento <font> permite a definição de bibliotecas inteiras de fontes usando SVG, referenciáveis via ID por CSS Dentro de <font> são definidos Caracterís=cas da fonte como família, altura, linha- base, etc: <font- face> Iden=ficadores para a fonte (<font- face- src>, <font- face- Uri>, etc.) Glifos* <glyph> individuais de cada caractere são desenhados dentro deste elemento usando sintaxe de <path> Atributos de <glyph> permitem especificar para cada glifo códigos Unicode, iden=ficadores, códigos de idioma, métricas, ligaduras, etc. Detalhes da criação e manipulação de SVG Fonts foge ao escopo deste curso. Para mais detalhes consulte a especificação em: h7p://www.w3.org/tr/svg/fonts.html * Símbolo usado para representar um caractere, em uma determinada família de fontes 6

7 Exemplo de definição de fontes* <svg width="400px" height="300px" version="1.1" xmlns = 'http://www.w3.org/2000/svg'> <defs> <font id="font1" horiz- adv- x="1000"> <font- face font- family="super Sans" font- weight="bold" font- style="normal" units- per- em="1000" cap- height="600" x- height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font- face- src> <font- face- name name="super Sans Bold"/> </font- face- src> </font- face> <missing- glyph><path d="m0,0h200v200h- 200z"/></missing- glyph> <glyph unicode="!" horiz- adv- x="300"><path d="..."/></glyph> <glyph d="..."/></glyph>... </font> <font id="font2" horiz- adv- x="1000"> <font- face font- family="super Sans" font- weight="normal" font- style="italic"...> <font- face- src> <font- face- name name="super Sans Italic"/> </font- face- src> </font- face> <missing- glyph><path d="m0,0h200v200h- 200z"/></missing- glyph> <glyph unicode="!" horiz- adv- x="300"><path d="..."/></glyph> <glyph d="..."/></glyph>... </font> </defs> </svg> * extraído da especificação W3C myfont.svg 7

8 Como usar uma fonte SVG Uma vez definida a fonte, ela deve ser referenciada via face { font- family: 'Super Sans'; font- weight: normal; font- style: italic; src: url("myfont.svg#font2") format("svg") face { font- family: 'Super Sans'; font- weight: bold; font- style: normal; src: url("myfont.svg#font1") format("svg") } Depois, qualquer elemento SVG pode usá- la <text x="100" y="100" style="font- family: 'Super Sans'; font- weight: normal; font- style: italic">texto usando uma SVG Font</text> 8

9 Como gerar SVG Fonts Criar uma família de fontes usando SVG Fonts requer muito trabalho Se você tem fontes true- type, pode convertê- las para SVG através do framework Apache Ba=k (h7p://xmlgraphics.apache.org/bakk) O Ba=k também fornece uma ferramenta de linha de comando: ba=k- I2svg que pode ser chamada por quaisquer aplicações Exemplo de uso O exemplo abaixo gera um arquivo contendo fontes SVG para os caracteres `0` (Unicode 0048) a `9` (Unicode 0057) em uma fonte SVG java - jar batik- ttf2svg.jar /fontes/corbel.ttf \ - l 48 - h 57 id ncorbel - o NumCorbel.svg A fonte deve ser referenciada via CSS face {font- family: 'Corbel'; src: url("numcorbel.svg#ncorbel") format("svg") </style> E depois pode ser usada normalmente em qualquer elemento: <text font- family="corbel"... /> 9

10 Atributos de <text> x e y representam coordenadas absolutas Podem conter um ou mais valores Primeiros n valores são posições dos n primeiros caracteres. Ex: <text x="0 5 10" y="0">olá</text> desenha O na posição 0, L na posição 5 e Á na posição 10 Os atributos dx e dy representam coordenadas rela=vas Deslocam o caractere (ou os primeiros n caracteres, se houver n valores) em relação à posição anterior do texto rotate gira o primeiro caractere Ou primeiros n caracteres se houver n valores textlength determina o comprimento do texto O texto é ajustado para caber no espaço lengthadjust="spacing spacingandglyphs" Define a forma como textlength ajusta o texto para caber no comprimento (variando espaço ou es=cando a fonte) 10

11 <tspan> <tspan> é um bloco interno ao texto que permite alterar propriedades de um trecho do texto Coordenadas Es=lo etc. Os atributos principais de <tspan> são os mesmos de <text> Mas cada <tspan> está no contexto de um <text> pai. SVG não possui recursos para automa=camente quebrar linhas (não há blocos de parágrafo) Cada elemento <text> desenha uma única linha de texto. Mas com <tspan> é possível construir blocos <text> mul=linha com cada linha definida em um <tspan>. 11

12 Exemplo com <tspan> e dx/dy Nos exemplos abaixo, o deslocamento horizontal rela=vo é man=do Incrementos com atributo dy, que leva em conta o valor anterior Os dois arquivos produzem o mesmo resultado <svg xmlns="http://www.w3.org/2000/svg"... viewbox=" "> <text font- size="12" x="5" y="15"> <tspan dx="0" dy="0">um</tspan> <tspan dy="15">dois</tspan> <tspan dy="15">tres</tspan> <tspan dy="15">quatro</tspan> <tspan dy="15">cinco</tspan> <tspan x="5" dy="0">um</tspan> <tspan dy="- 15">Dois</tspan> <tspan dy="- 15">Tres</tspan> <tspan dy="- 15">Quatro</tspan> <tspan dy="- 15">Cinco</tspan> </text> </svg> <svg xmlns="http://www.w3.org/2000/svg"... viewbox=" "> <text font- size="12" x="5" y="15"> <tspan dx="0" dy=" "> Um Dois Tres Quatro Cinco</tspan> <tspan x="5" dy=" "> Um Dois Tres Quatro Cinco</tspan> </text> </svg> 12

13 Exemplos com rotate (W3C) <text font- family="verdana" font- size="55" fill="blue" > <tspan x="250" y="150" rotate="- 30,0,30"> Hello, out there</tspan> </text> <text id="parent" font- family="arial, sans- serif" font- size="32" fill="red" x="40" y="40" rotate="5,15,25,35,45,55"> Not <tspan id="child1" rotate="- 10,- 20,- 30,- 40" fill="orange">all characters <tspan id="child2" rotate="70,60,50,40,30,20,10" fill="yellow">in <tspan id="child3">the</tspan> </tspan> <tspan id="child4" fill="orange" x="40" y="90">text</tspan> have a </tspan> <tspan id="child5" rotate="- 10" fill="blue">specified</tspan> rotation </text> Fonte: W3C (SVG spec) 13

14 Exemplos <text> e <tspan> (W3C) <text x="250" y="150" font- family="verdana" font- size="55" fill="blue" > Hello, out there</text> <text x="200" y="150" fill="blue" > You are <tspan font- weight="bold" fill="red">not</tspan> a banana. </text> <text x="200" y="150" fill="blue" > But you <tspan dx="2em" dy="- 50" font- weight="bold" fill="red" >are</tspan> <tspan dy="100">a peach!</tspan></text> <text fill="rgb(255,164,0)" > <tspan x=" " y="100">cute and</tspan> <tspan x=" " y="200">fuzzy</tspan> </text> Fonte: W3C (SVG spec) 14

15 Atributos de es=lo (CSS ou XML) text- decoration="underline overline line- through..." Texto sublinhado, sobrelinhado, riscado letter- spacing="normal valor inherit" E s p a ç o e n t r e l e t r a s word- spacing="normal valor inherit" Espaço entre palavras kerning="auto comprimento inherit" Espaçamento especial entre caracteres Modo auto é default e automa=camente reduz o espaçamento entre caracteres específicos (ex: "VA") 15

16 Atributos de alinhamento text- anchor="start middle end" Alinhamento do texto (onde ele é ancorado) Posição depende do idioma, cultura, etc. Para alfabeto la=no start = esquerda, end = direita baseline- shift="baseline sub super n% valor..." Desvio rela=vo ver=cal em relação à linha base Permite efeitos subescrito, sobrescrito, etc. dominant- baseline="auto ideographic..." Linha base principal do texto alignment- baseline="auto ideographic..." Linhas base secundárias (rela=vas à linha base principal) 16

17 Suporte de atributos de es=lo <style type="text/css"> #decoration {text- decoration: overline underline line- through;} #linespace {letter- spacing: 1em} #wordspace {word- spacing: 1cm} #stretch {font- stretch: ultra- expanded} #squish {font- stretch: ultra- condensed} #nokern {kerning: 0} #kernauto {kerning: auto} #kernjoin {kerning: - 8} </style> Squiggle 4.0Beta <text font- family="corbel, sans- serif" font- size="20"> <tspan id="decoration">texto cheio de linhas</tspan> <tspan dy="30" x="50" id="linespace">letras espacadas</tspan> <tspan dy="30" x="50" id="wordspace">muito espaco entre palavras</tspan> <tspan dy="30" x="50" id="stretch">texto esticado</tspan> <tspan dy="30" x="50" id="squish">texto espremido</tspan> <tspan dy="30" x="50" textlength="200">200 pixels</tspan> <tspan dy="30" x="50" textlength="200" lengthadjust="spacingandglyphs">200 pixels de largura</tspan> <tspan dy="30" x="50" textlength="200" lengthadjust="spacingandglyphs">texto... pixels de largura</tspan> <tspan dy="30" x="50">h<tspan baseline- shift="sub">2</tspan>o</tspan> <tspan>e = mc<tspan baseline- shift="super">2</tspan></tspan> <tspan dy="30" x="50" id="nokern">vavav</tspan> <tspan id="kernauto">vavav</tspan> <tspan id="kernjoin">vavav</tspan> </text> 17

18 Alinhamento horizontal: text- anchor <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300"> <g transform="translate(300,50)" > <g id="grid" stroke="blue"... stroke- dasharray="10 10"> <line x1="0" y1="- 25" x2="0" y2="150" /> <line x1="- 300" y1="0" x2="300" y2="0" /> <line x1="- 300" y1="60" x2="300" y2="60" /> <line x1="- 300" y1="120" x2="300" y2="120" /> </g> <text font- family="monospace" font- size="24"> <tspan x="0" y="0" text- anchor="start">pelo inicio (START)</tspan> <tspan x="0" dy="60" text- anchor="middle">pelo meio (MIDDLE)</tspan> <tspan x="0" dy="60" text- anchor="end">pelo final (FIM)</tspan> </text> </g> </svg> 18

19 Alinhamento ver=cal: baseline Resultado diferente webkit e mozilla Apenas hanging e auto são confiáveis Outros browsers: apenas auto funciona <g transform="translate(50,50)"... > <line x1="0" y1="0" x2="300" y2="0" /> <line x1="0" y1="100" x2="300" y2="100" /> <line x1="0" y1="200" x2="300" y2="200" /> <line x1="0" y1="300" x2="300" y2="300" /> </g> <g transform="translate(50,50)" text- anchor="start" font- family="monospace" font- size="24" font- weight="bold"> <text x="0" y="0" dominant- baseline="ideographic">ideographic baseline</text> <text x="0" y="100" dominant- baseline="auto">auto baseline</text> <text x="0" y="200" dominant- baseline="mathematical">mathematical baseline</text> <text x="0" y="300" dominant- baseline="hanging">hanging baseline</text> </g> 4.0Beta 19

20 Elementos <text> podem ser referenciados e reusados como qualquer outro objeto SVG através de <use> <tref> Para segmentos de texto con=dos no interior de blocos <text>, pode- se usar o elemento <tref> Referencia apenas o conteúdo do texto (não preserva atributos de es=lo ou posição) <svg viewbox=" "... > <defs> <text id="svg">scalable Vector Graphics</text> </defs> <text x="50" font- weight="bold" font- style="italic" y="100" font- size="12pt" lengthadjust="spacingandglyphs" font- family="arial"> <tspan textlength="250" x="100">os arquivos foram criados com</tspan> <tspan textlength="300" dy="30" x="50"><tref xlink:href="#svg"/> 1.1</tspan> <tspan textlength="300" dy="30" x="50">e as animacoes geradas com </tspan> <tspan textlength="300" dy="30" x="50"><tref xlink:href="#svg"/> 1.2 Tiny.</tspan> </text> </svg> 20

21 <textpath> Texto pode ser desenhado na forma de um caminho curvo Elemento <textpath> referencia um <path> que servirá de linha base para o texto Atributo startoffset = percentagem % Indica a posição, especificada como uma percentagem do comprimento total do caminho, onde o texto começa method="align stretch" (default = align) Se o texto deve ser es=cado para seguir o caminho ou alinhado pela tangente (default) spacing="auto exact" Define a forma como os caracteres são calculados sobre o caminho (auto é default) 21

22 Exemplos (W3C) Texto seguindo um caminho Com offset para iniciar <defs><path id="mypath" d="m C C C " /></defs> <use xlink:href="#mypath" fill="none" stroke="red" /> <text font- family="verdana" font- size="42.5" fill="blue" > <textpath xlink:href="#mypath"> We go up, then we go down, then up again </textpath> </text> <textpath xlink:href="#mypath" startoffset="80%"> We go up, then we go down, then up again </textpath> Com <tspan> Fonte: W3C (SVG spec) <textpath xlink:href="#mypath"> We go <tspan dy="- 30" fill="red" >up</tspan> <tspan dy="30">, </tspan> then we go down, then up again </textpath> 22

23 Texto girando em caminho circular <defs> <path d="m100,200 C100, , ,200 S100, ,200" id="circulo" stroke="red" stroke- width="1" fill- opacity="0"> </path> </defs>... <use xlink:href="#circulo" stroke- dasharray="5 5" /> <text font- size="15" x="100" dy="- 10" id="texto" font- family="monospace"> <animatetransform attributename="transform" type="rotate" from="0,175,200" to="360,175,200" repeatcount="indefinite" fill="freeze" dur="7s"/> <textpath xlink:href="#circulo"> palavras que giram confundem as letras </textpath> </text> 23

24 Outros atributos Outros atributos e propriedades de <text> são relacionados à internacionalização direc=on="ltr rtl" (lew- to- right e right- to- lew) indica a direção do texto; idiomas como árabe e hebraico lêem da direita para a esquerda wri=ng- mode="lr- tb rl- tb etc." (lr = right- lew, tb = top- boyom) permite escrever em várias direções (como ideogramas orientais) unicode- bidi="..." define forma de suporte à texto bidirecional (use com xml:lang e atributos de internacionalização h7p://www.w3.org/tr/xml- i18n- bp/) 24

animação smil Helder da Rocha (helder@argonavis.com.br)

animação smil Helder da Rocha (helder@argonavis.com.br) animação smil Helder da Rocha (helder@) Animação em SVG com SMIL Mais simples que scrip.ng, porém menos suporte nos browsers Chrome, Opera, FF 4 em diante), IE 9.0 (suporte parcial) Elementos e atributos

Leia mais

gradientes padrões máscaras e clipping efeitos e filtros Helder da Rocha (helder@argonavis.com.br)

gradientes padrões máscaras e clipping efeitos e filtros Helder da Rocha (helder@argonavis.com.br) gradientes padrões máscaras e clipping efeitos e filtros Helder da Rocha (helder@) Gradientes e Padrões Com SVG você pode pintar o interior (fill) ou o traço (stroke) de figuras e texto usando Cores opacas

Leia mais

A barra de ferramentas abaixo resume os principais comandos de texto para trabalhar com o AutoCAD:

A barra de ferramentas abaixo resume os principais comandos de texto para trabalhar com o AutoCAD: TRABALHANDO COM TEXTOS Para desenhar textos o AutoCAD possui duas importantes ferramentas. O processo ded inserir o texto no desenho é fácil e as dúvidas costumam surgir na definição do tamanho da letra.

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

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

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

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

Autodesk Civil 3D. Adaptado para o Brasil

Autodesk Civil 3D. Adaptado para o Brasil Autodesk Civil 3D Adaptado para o Brasil Abordamos a parte de labels do Civil3D onde criei uma sequência de comandos que no final resultaram na formatação típica brasileira para identificar estes componentes

Leia mais

uma introdução prática Helder da Rocha (helder@argonavis.com.br)

uma introdução prática Helder da Rocha (helder@argonavis.com.br) uma introdução prática Helder da Rocha (helder@) Programa (4 dias) Introdução O que é SVG, ferramentas, suporte, plataformas Parte I 1. Cores de preenchimento, es@los e traços 2. Figuras básicas: retângulo,

Leia mais

Filtros. Filtros SVG SVG_Filter_Blend SVG_Filter_Blur SVG_Filter_Offset

Filtros. Filtros SVG SVG_Filter_Blend SVG_Filter_Blur SVG_Filter_Offset 4D SVG Filtros Introdução Atributos Cores e gradientes Desenho Documentos Estrutura e definições Texto Utilitários Anexos Novidades Lista alfabética dos comandos Filtros Filtros SVG SVG_Filter_Blend SVG_Filter_Blur

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

Programação para Internet

Programação para Internet Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

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

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

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

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo Imagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo Imagens Índice

Leia mais

1) Criar o código HTML para construir a página representada pela imagem abaixo.

1) Criar o código HTML para construir a página representada pela imagem abaixo. 1) Criar o código HTML para construir a página representada pela imagem abaixo. 2) Código HTML puro (criar arquivo index.html): brasil Motores Motores diesel para uso automotivo, veicular, marítimo,

Leia mais

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets António Gonçalves ESTSetúbal ÍNDICE Introdução Sintaxe Básica Regras Selectores Selectores Contextuais Propriedades Valores Agrupamento Herança Comentários Pseudo-classes e Pseudo-elementos

Leia mais

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos.

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos. Ana Paula Ambrósio Zanelato anapaula@unitoledo.br Disciplina: Aplicações para Web Conteúdo Introdução; ; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores

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

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

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

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

HyperText Markup Language HTML

HyperText Markup Language HTML HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma

Leia mais

Design de Comunicação III

Design de Comunicação III Design de Comunicação III Curso de Design de Comunicação Escola Superior de Educação e Comunicação Universidade do Algarve Docente Joana Lessa * Princípios Tipográficos (A partir da obra "The Elements

Leia mais

EDITOR DE TEXTO BROFFICE WRITER

EDITOR DE TEXTO BROFFICE WRITER 1 1 Editor de Texto BrOffice Writer O Writer é o editor de texto do pacote OpenOffice, que corresponde ao Microsoft Word. Um editor de texto é um programa com recursos para formatação de texto que poderá

Leia mais

C A P I T U L O 0 1 I N T R O D U Ç Ã O XHTML

C A P I T U L O 0 1 I N T R O D U Ç Ã O XHTML C A P I T U L O 0 1 I N T R O D U Ç Ã O A O XHTML 1 O QUE É XHTML? XHTML significa Linguagem de Marcação de Hipertexto (Extensible Hypertext Markup Language) XHTML é quase idêntico ao HTML 4.01 XHTML é

Leia mais

TÉCNICAS DE CAD PARA ENGENHARIA CIVIL AULA 6

TÉCNICAS DE CAD PARA ENGENHARIA CIVIL AULA 6 TÉCNICAS DE CAD PARA ENGENHARIA CIVIL AULA 6 1. USO DE DIMENSÕES (COTAS) 2. INCLUSÃO DE TEXTOS NO DESENHO 3. OBTENÇÃO DE ÁREAS EM UM DESENHO 1. USO DE DIMENSÕES (COTAS) Com o AutoCAD pode-se facilmente

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Estrutura básica do HTML Um documento HTML deve estar delimitado pela tag e . Dentro deste documento, podemos ainda distinguir

Leia mais

Folha 2. O processador de texto do STAROFFICE : Formatações

Folha 2. O processador de texto do STAROFFICE : Formatações Folha 2. O processador de texto do STAROFFICE : Formatações 1. Formatação de páginas, caracteres e parágrafos. 1.1. Considerar o seguinte texto : História do Computador. O computador é o resultado da necessidade

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

Computação Gráfica 3D Studio Max 2008.1 www.damasceno.info Prof.: Luiz Gonzaga Damasceno

Computação Gráfica 3D Studio Max 2008.1 www.damasceno.info Prof.: Luiz Gonzaga Damasceno 4.2.1 Criação de Splines (continuação) Circle Spline Create panel > Shapes > Splines > Object Type > Circle Create menu > Shapes > Circle Use Circle para criar splines circulares fechadas feitas de quatro

Leia mais

XML. Introdução Ferramentas para Internet Marx Gomes Van der Linden. ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida )

XML. Introdução Ferramentas para Internet Marx Gomes Van der Linden. ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) XML Introdução Ferramentas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Objetivos Apresentar a linguagem de marcação XML bem como

Leia mais

Notas para um encontro sobre Tipografia

Notas para um encontro sobre Tipografia Priscila Farias Notas para um encontro sobre Tipografia [Criação (design de tipos) e/ou utilização (design com tipos) de símbolos visíveis relacionados aos caracteres ortográficos e para-ortográficos da

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

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

Leia mais

2 HTML Inserindo objetos

2 HTML Inserindo objetos 2 HTML Inserindo objetos Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Imagem...3 Links...5 Links para locais da mesma página...6 Áudio e vídeo...8

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

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

Folha 3. O processador de texto do STAROFFICE : Ferramentas

Folha 3. O processador de texto do STAROFFICE : Ferramentas Folha 3. O processador de texto do STAROFFICE : Ferramentas 1. Quebra de páginas, secções, símbolos especiais e fórmulas 1.1. Considerar o seguinte texto : Disciplina de Informática. A disciplina de Informática

Leia mais

CSS3 para principiantes:

CSS3 para principiantes: CSS3 para principiantes: Neste post vou apresentar algumas das inovações de CSS3 que funcionam em todos os browsers modernos. Como as inovações são tantas decidi escolher duas das mais importantes. Background-size:UL06

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

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

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

Curso de Adobe Illustrator CS2

Curso de Adobe Illustrator CS2 Curso de Adobe Illustrator CS2 Sessão 1: Desenhar logótipos e botões O Adobe Illustrator disponibiliza uma grande variedade de ferramentas para criar formas geométricas, logótipos e símbolos, com muitos

Leia mais

6.2 - Formulários: form
...
form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

XPath. Resumo Descrever um esquema específico XML (XPath) para identificar subestruturas

XPath. Resumo Descrever um esquema específico XML (XPath) para identificar subestruturas XPath Resumo Descrever um esquema específico XML (XPath) para identificar subestruturas de documentos Xpath É uma linguagem para referenciar partes de um documento XML Projetada para ser usada por XSLT

Leia mais

Introdução à SVG. capítulo 1. 1.1 Introdução

Introdução à SVG. capítulo 1. 1.1 Introdução capítulo 1 Introdução à SVG Neste capítulo, faremos uma introdução à tecnologia SVG apresentando sua definição e suas finalidades. Mostraremos sua evolução relatada em um breve histórico desde sua criação

Leia mais

3.1.7. Definição do fundo da página

3.1.7. Definição do fundo da página 3.1.7. Definição do fundo da página 1 Definição do fundo da página A definição do fundo de uma página pode ser feita através da atribuição de uma cor ou de uma imagem Quando é feita através da utilização

Leia mais

Módulo: Criação de Páginas WEB

Módulo: Criação de Páginas WEB Módulo: Criação de Páginas WEB 50 Horas - Sessão 05/13 TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto/imagem a passar no ecrã. Deve ser utilizado quando queremos dar destaque

Leia mais

CSS#:#Cascading#Style#Sheets#

CSS#:#Cascading#Style#Sheets# CSS#:#Cascading#Style#Sheets# Composição#Web# # Engenharia#Informá=ca#/#Informá=ca#Web#2014/15# Artur%M.%Arsénio% Style#Sheets# #Folhas#de#Es=los# CSS#(Cascading#Style%Sheet% %ou%folhas%de%es6los% encadeados)%é#um#conjunto#de#regras#de#formatação#que#

Leia mais

O QUE HÁ DE NOVO Audaces Vestuário Versão Clube Audaces

O QUE HÁ DE NOVO Audaces Vestuário Versão Clube Audaces O QUE HÁ DE NOVO Audaces Vestuário Versão Clube Audaces Com o propósito de produzir tecnologia de ponta, o principal requisito da Política de Qualidade da Audaces é oferecer produtos inovadores e serviços

Leia mais

Introdução ao HTML. Sumário

Introdução ao HTML. Sumário Introdução ao HTML Telemédia Grupo de Comunicações por Computador Sumário em HTML Texto Alternativo Alinhamento Margens Redimensionar 1 em HTML Para inserir uma imagem basta usar a etiqueta da seguinte

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

Indice. Prof. Donald Mark Santee

Indice. Prof. Donald Mark Santee Introdução aos Gráficos usando Python Prof. Donald Mark Santee Indice Primeiros Passos...1 Configurando os Eixos e a Grade...4 Configurando as propriedades das curvas...4 Trabalhando com vários gráficos

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

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10 HTML Sessão 10 HTML HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere

Leia mais

DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza

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

Compêndio códigos.

Compêndio códigos. <html> Compêndio códigos ADVERTÊNCIA: A que se segue é apenas uma lista com as tags de HTML e os seus possíveis atributos, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba

Leia mais

Cria medidas de distâncias entre dois pontos que serão sempre projeções no eixo X e Y (cotas horizontais e verticais).

Cria medidas de distâncias entre dois pontos que serão sempre projeções no eixo X e Y (cotas horizontais e verticais). Cotando desenhos Linear Aligned Ordinate Radius Diameter Angular Quick Dimension Baseline Cria medidas de distâncias entre dois pontos que serão sempre projeções no eixo X e Y (cotas horizontais e verticais).

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

4 - HTML Básico: 4.2 - Criando documentos HTML:

4 - HTML Básico: 4.2 - Criando documentos HTML: 4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).

Leia mais

HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.).

HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). HTML Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). Para se criar um novo documento HTML pode-se utilizar o Bloco de Notas, bastando para tal gravar o documento com

Leia mais

Curso rapidíssimo de Processing

Curso rapidíssimo de Processing Curso rapidíssimo de Processing Primeira parte: bolas 1. Instale: http://processing.org/download/. 2. Crie uma pasta processing, ao lado da sua pasta sources (a dos programas C). 3. Abra o Processing.

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

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

Primitivas Gráficas. Prof. Márcio Bueno {cgtarde,cgnoite}@marciobueno.com. Fonte: Material do Prof. Robson Pequeno de Sousa e do Prof.

Primitivas Gráficas. Prof. Márcio Bueno {cgtarde,cgnoite}@marciobueno.com. Fonte: Material do Prof. Robson Pequeno de Sousa e do Prof. Primitivas Gráficas Prof. Márcio Bueno {cgtarde,cgnoite}@marciobueno.com Fonte: Material do Prof. Robson Pequeno de Sousa e do Prof. Robson Lins Traçado de Primitivas em Dispositivos Matriciais Conversão

Leia mais

Desenvolvimento de Jogos 2D. Gutenberg Neto gutenberg@fuze.cc

Desenvolvimento de Jogos 2D. Gutenberg Neto gutenberg@fuze.cc Desenvolvimento de Jogos 2D Gutenberg Neto gutenberg@fuze.cc Inteligência Artificial Definição de comportamento de NPCs (personagens não-jogáveis) de forma a simular inteligência IA em jogos não necessariamente

Leia mais

Aplicação para Web I. Começando a compreender o HTML

Aplicação para Web I. Começando a compreender o HTML Aplicação para Web I Começando a compreender o HTML A Linguagem da WEB O HTML ou HyperText Markup Language linguagem universal compreendida pelos navegadores web (browsers) para a comunicação utilizando

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

Para acessar o NVU clique em Iniciar >> Programas >> Editor de Internet, iniciando aparecerá a seguinte tela:

Para acessar o NVU clique em Iniciar >> Programas >> Editor de Internet, iniciando aparecerá a seguinte tela: 1 APOSTILA NVU Cobra Tecnologia, www.cobra.com.br Última revisão em 12 de Julho de 2005 DESCRIÇÃO: O NVU é uma ferramenta que foi criada para web designers e para desenvolvedores de aplicações para o ambiente

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se

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

ROBERTO OLIVEIRA CUNHA

ROBERTO OLIVEIRA CUNHA LEIAME APRESENTAÇÃO Nenhuma informação do TUTORIAL DO MICRO- SOFT OFFICE WORD 2003 poderá ser copiada, movida ou modificada sem autorização prévia e escrita do Programador Roberto Oliveira Cunha. Programador:

Leia mais

Imagens - Formatos. GIF (Graphics Interchange Format) JPEG (ou JPG) (Joint Pictures Experts Graphis)

Imagens - Formatos. GIF (Graphics Interchange Format) JPEG (ou JPG) (Joint Pictures Experts Graphis) Imagens - Formatos GIF (Graphics Interchange Format) - Muito popular na web. - Permite ter um máximo de 256 cores. - Indicado para cartoons, logos, imagens com áreas transparentes e animações. JPEG (ou

Leia mais

2. MARCA COM ASSINATURA. 2.4 Tamanho mínimo para logotipo com assinatura. Tamanho mínimo: y = 5 cm

2. MARCA COM ASSINATURA. 2.4 Tamanho mínimo para logotipo com assinatura. Tamanho mínimo: y = 5 cm 2.4 Tamanho mínimo para logotipo com assinatura Tamanho mínimo: y = 5 cm largura (y) > 5 cm O tamanho mínimo para o logotipo com assinatura é de 5 cm de largura. Essa regra é a mesma tanto para o logotipo

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

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

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;

Leia mais

Controlar seu computador com sua voz

Controlar seu computador com sua voz Controlar seu computador com sua voz Use o recurso de Reconhecimento de Fala do Windows para executar comandos e facilitar algumas tarefas Trabalhar em um computador sem poder usar teclado e mouse pode

Leia mais

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

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

Prof.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML

Prof.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML Prof.: Melba Lima Gorza Aula Introdutória de HTML Componentes do HTML Estrutura de um documento XHTML primeiro Documento XHTML meu primeiro documento XHTML

Leia mais

(Ilustração gerada no Sodipodi, tratada no gimp, Documento gerado no OpenOffice)

(Ilustração gerada no Sodipodi, tratada no gimp, Documento gerado no OpenOffice) (Ilustração gerada no Sodipodi, tratada no gimp, Documento gerado no OpenOffice) Tutorial Sodipoi Autor: Alexandre da silva costa Anakinpendragon (anakinpendragon@yahoo.com.br) Esse tutorial vem para

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

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 Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas

Leia mais

APLICATIVOS GRÁFICOS (AULA 10)

APLICATIVOS GRÁFICOS (AULA 10) Prof. Breno Leonardo G. de M. Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br APLICATIVOS GRÁFICOS (AULA 10) 1 Roteiro Operações Booleanas Comprimir e Expandir Simplificação Criando Texto Editor

Leia mais

Linguagem de Programação I

Linguagem de Programação I Linguagem de Programação I i Linguagem de Programação I Ed. v1.0 Linguagem de Programação I ii Copyright 2013 UAB Você tem a liberdade de: Compartilhar copiar, distribuir e transmitir a obra. Remixar criar

Leia mais

Sistema topograph 98. Tutorial Módulo Projetos

Sistema topograph 98. Tutorial Módulo Projetos Sistema topograph 98 Tutorial Módulo Projetos Como abrir um projeto existente _ 1. Na área de trabalho do Windows, procure o ícone do topograph e dê um duplo clique sobre ele para carregar o programa.

Leia mais

Comandos Complementares

Comandos Complementares Comandos Complementares Nesta parte do curso vou apresentar comandos que geralmente não são ensinados em cursos rápidos porém são fáceis de se aprender e vão facilitar bastante o uso do CAD. Dist Esse

Leia mais

Abaixo do Objeto WorkSheet temos a coleção Cells, que representa todas as células de uma planilha.

Abaixo do Objeto WorkSheet temos a coleção Cells, que representa todas as células de uma planilha. Aula 1 O modelo de objetos do Excel APPLICATION É o próprio Excel. Temos diversas propriedades e métodos importantes nesse objeto. Destacamos dois exemplos: Application.DisplayAlerts Se for true, o Excel

Leia mais

Lição3 Adobe Photoshop CS5. Princípios Básicos de Camadas. Utilize o painel Layers e copie uma camada a partir de um arquivo

Lição3 Adobe Photoshop CS5. Princípios Básicos de Camadas. Utilize o painel Layers e copie uma camada a partir de um arquivo Lição3 Adobe Photoshop CS5 Princípios Básicos de Camadas CENTRO DE ENSINO SUPERIOR DO AMAPÁ O Adobe Photoshop permite isolar diferentes partes de uma imagem em camadas. Cada camada pode ser editada como

Leia mais

4. Características Gerais das Tabelas do HTML

4. Características Gerais das Tabelas do HTML 4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag

Leia mais

Este relatório tem por objetivo, abordar a sintaxe XML.

Este relatório tem por objetivo, abordar a sintaxe XML. Relatório do GPES Este relatório tem por objetivo, abordar a sintaxe XML. XML Estrutura do documento Um documento XML é uma árvore rotulada onde um nó externo consiste de: [1] Dados de caracteres (uma

Leia mais