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

modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha

modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha (helder@) Modelo de apresentação gráfica Objetos em SVG são desenhados em contextos gráficos individuais Grupos,

Leia mais

caminhos linhas, curvas e arcos Helder da Rocha

caminhos linhas, curvas e arcos Helder da Rocha caminhos linhas, curvas e arcos Helder da Rocha (helder@) Caminhos Caminhos representam o contorno de uma figura São definidos por seqüências de comandos (representados por letras) e coordenadas (pares

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

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 A partir do HTML 4.01, o único modo de alterar a letra (cor, tamanho, tipo, etc.) ou o fundo (cor ou imagem) é utilizando o atributo

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

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

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

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

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

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) CSS (Cascading Style Sheet) André Tavares da Silva andre.silva@udesc.br CSS Folha de Estilo em Cascata Mecanismo simples para adicionar estilos (fontes, cores, espaçamentos, por exemplo) aos documentos

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

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

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

08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão

08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior

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

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

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

estrutura do documento grupos, símbolos e marcadores reuso de objetos por referência Helder da Rocha

estrutura do documento grupos, símbolos e marcadores reuso de objetos por referência Helder da Rocha estrutura do documento grupos, símbolos e marcadores reuso de objetos por referência Helder da Rocha (helder@) Estrutura de um documento Documentos SVG podem declarar figuras como elementos de primeiro

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

> 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

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

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

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

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

Reuso com Herança a e Composiçã

Reuso com Herança a e Composiçã Java 2 Standard Edition Reuso com Herança a e Composiçã ção Helder da Rocha www.argonavis.com.br 1 Como aumentar as chances de reuso Separar as partes que podem mudar das partes que não mudam. Exemplo:

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

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

4. Definições dos atributos e seus valores padrões:

4. Definições dos atributos e seus valores padrões: Atributos 1. Para a integração com o Promob ERP, é necessário criar um grupo de atributos chamado Banco_Dados. É importante que este grupo seja criado dentro de entidade.attributes. 2. Os atributos criados

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

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

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

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

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

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

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

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

Indesign CS e Photoshop

Indesign CS e Photoshop Universidade Presbiteriana Mackenzie Guia de laboratório para uso nas disciplinas Planejamento Gráfico I e II Indesign CS e Photoshop Idealizado por: Prof Ms. André Nóbrega Dias Ferreira. Este é um guia

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

#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

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

GUIA DE Identidade Visual

GUIA DE Identidade Visual Texto GUIA DE Identidade Visual UNA-SUS Guia de Identidade Visual 1 Index Apresentação Malha Construtiva Símbolo Tipograma Símbolo + Logotipo Arejamento Aplicações Preto e Branco Horizontais Verticais

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

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

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

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

Internet e Programação Web

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

Leia mais

#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

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

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

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

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

Editor de Texto openwysiwyg +3ST Versão 1.4.7 e +3ST 1.0.0 Manual de Usuário ÍNDICE

Editor de Texto openwysiwyg +3ST Versão 1.4.7 e +3ST 1.0.0 Manual de Usuário ÍNDICE Editor de Texto openwysiwyg +3ST Versão 1.4.7 e +3ST 1.0.0 Manual de Usuário Este Manual apresenta instruções para a instalação e utilização do Editor de Texto para Web, customizado pela 3ST tomando por

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

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

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web JavaScript Sintaxe da Linguagem: Delimitadores e etc Profª MSc. Elizabete Munzlinger JavaScript Sintaxe da Linguagem Índice 1 SINTAXE DA LINGUAGEM... 2 1.1 Delimitadores de

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

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

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

Introdução ao AutoCAD Capitulo VI: Adicionar texto

Introdução ao AutoCAD Capitulo VI: Adicionar texto Introdução ao AutoCAD João Manuel R. S. Tavares / JOF Objectivos Criar uma linha de texto; Criar caixas de texto (estilo parágrafo); Mudar o estilo do texto (fonte, altura); Utilizar opções de justificação

Leia mais

Workshop Processing: Visualização de Dados e Interatividade

Workshop Processing: Visualização de Dados e Interatividade Workshop Processing: Visualização de Dados e Interatividade Imagens Claudio Esperança Programa de Engenharia de Sistemas e Computação COPPE / UFRJ Escola de Belas Artes Claudio Esperança (PESC/COPPE/UFRJ)

Leia mais

CONTEÚDO PROGRAMÁTICO

CONTEÚDO PROGRAMÁTICO CONTEÚDO PROGRAMÁTICO XML e XSLT Completo Carga horária: 40 horas TreinaWeb Tecnologia LTDA CNPJ: 06.156.637/0001-58 Av. Paulista, 1765 - Conj 71 e 72 São Paulo - SP CONTEÚDO PROGRAMÁTICO Ementa do curso

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

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

SIMULADOS & TUTORIAIS

SIMULADOS & 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 mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

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

Leia mais

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

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

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

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

Leia mais

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