Language que em tradução livre resulta em Linguagem Extensível para

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

Download "Language que em tradução livre resulta em Linguagem Extensível para"

Transcrição

1 6.6 XHTML: XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em tradução livre resulta em Linguagem Extensível para Marcação de Hipertexto, uma aplicação XML, escrita para substituir o HTML e nada mais é do que uma HTML "pura, clara e limpa" Vantagens de se usar XHTML: Enumeram-se várias e efetivas vantagens de se usar XHTML nos novos documentos WEB produzidos ou se migrar os documentos atuais escritos em HTML. E, dentre elas destaca-se em primeiro plano a compatibilidade da linguagem XHTML com as futuras aplicações de usuários, garantindo desde já que as criações XHTML conservar-se-ão estáveis por longos anos. A tendência é a de que futuras versões de navegadores e agentes de usuários em geral, deixem de suportar elementos e atributos já em desuso ("deprecated") segundo as Recomendações do W3C 1, bem como antigos e ultrapassados esquemas e esboços da HTML. XHTML é a linguagem da web do futuro desde já a disposição de projetistas e desenvolvedores web. XHTML é um código consistente que dispensa uso de "truques" e "hacks" para contornar "bugs". Editar um código XHTML existente é uma tarefa bem simples por se tratar de uma escrita limpa e evidente. O tempo de carregamento de uma página XHTML é mais rápido, pois os navegadores têm a interpretar uma página limpa sem ter que decidir sobre renderização de erros de código. 1 O World Wide Web Consortium (W3C) é a principal organização de padronização da World Wide Web. Consiste em um consórcio internacional com quase 400 membros (agrega empresas, órgãos governamentais e organizações independentes) com a finalidade de estabelecer padrões para a criação e a interpretação de conteúdos para a Web

2 Uma página XHTML é mais acessível aos navegadores e às aplicações de usuário em geral, incrementando a interoperabilidade e a portabilidade dos documentos web. Uma página XHTML é totalmente compatível com todas as aplicações HTML antigas e já ultrapassadas XHTML é um "Padrão Web" (Web Standard) XHTML 1.0 é uma recomendação do W3C e esta versão data de 26 de janeiro de Isto significa que trata-se de uma linguagem estável, oficialmente especificada pelo W3C, tendo sido projetada e revisada pelos seus membros e é um "Padrão Web" As diferenças entre XHTML e HTML: As principais diferenças são: Todos os tags devem ser escritos em letras minúsculas: Errado: <DIV><P>Aqui um texto</p></div> Certo: <div><p>aqui um texto</p></div> Os tags devem estar convenientemente aninhados: Errado: <div><em><p>aqui um texto negrito</em></p></div> Certo: <div><em><p>aqui um texto negrito</p></em></div>

3 Os documentos devem ser bem formados: Todos os elementos XHTML devem estar corretamente aninhados dentro do elemento raiz <html>. A estrutura básica do documento deve ser conforme abaixo: <html> <head>... </head> <body>... </body> </html> O uso de tags de fechamento é obrigatório: Em HTML é permitido, para determinados elementos, omitir-se o tag de fechamento. XHTML não permite omissão de qualquer tag de fechamento. Errado: <p>um parágrafo.<p>outro parágrafo. Certo: <p>um parágrafo.</p><p>outro parágrafo.</p> Elementos vazios (TAGS abertas) devem ser fechados: Errado: <br><hr><img src="imagem.gif" alt="minha imagem"> Certo: <br /><hr /><img src="imagem.gif" alt="minhaimagem" /> Sintaxe para atributos: Nomes de atributos: Assim como os tags, os atributos também são sensíveis ao tamanho de caixa e então deve-se escrever nomes de atributos em minúsculas:

4 Errado: <td ROWSPAN="3"> Certo: <td rowspan="3"> Valores de atributos: Os valores de atributos devem estar entre "aspas duplas " ou 'aspas simples': Errado: <td rowspan=3> Certo: <td rowspan="3"> ou <td rowspan='3'> Valores dos atributos: Todos os atributos devem receber um valor: Errado: <input checked /> Certo: <input checked="checked" /> Os atributos id e name: O HTML define o atributo name para os elementos a, form, frame, iframe, img, input e map. O HTML também introduziu o atributo id. Ambos atributos foram projetados para serem usados como identificadores. Documentos XHTML compatíveis com XML e bem estruturados, DEVEM usar o atributo id e não name ao definir identificadores para os elementos listados acima. Em XHTML, o atributo name destes elementos está formalmente em desuso e possivelmente será excluido nas versões futuras de XHTML

5 Errado: <img src="imagem.gif" name="minha_imagem" /> Certo: <img src="imagem.gif" id="minha_imagem" /> DESENVOLVIMENTO WEB I Nota: Por razões de compatibilidade com navegadores antigos você pode usar ambos os atributos como mostrado a seguir: <img src="imagem.gif" id="minha_imagem" name="minha_imagem" />

6 7 - Folhas de Estilos (CSS): Introdução às CSS: CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata e é definida como: "Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web." A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site. Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando por conta das CSS toda a responsabilidade pelo visual do documento. HTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões, formulários, imagens e demais elementos da página e CSS define cores, posicionamento na tela, estilos de linhas, bordas e tudo o mais relacionado à apresentação. A adoção desta técnica resulta em múltiplas vantagens e benefícios que não são conseguidos quando se utiliza o conceito largamente empregado para construção de web sites, baseado no uso de tabelas e de atributos de estilização dentro das tags HTML. CSS é suportado por todos os navegadores atuais Um breve histórico: Quando a web foi criada por Tim Berners Lee, HTML era utilizada apenas para estruturar os conteúdos. Com a popularização da web, os desenvolvedores começaram a sentir a necessidade de adicionar layout às páginas. Os fabricantes de navegadores (Microsoft e Netscape) criaram tags para controlar layout: A frase Você precisa do navegador X para visualizar

7 esta página tornou-se muito comum. CSS foi criada pelo consórcio W3C 2 para solucionar este tipo de problema e padronizar o controle de layouts Sintaxe CSS: Funcionamento Básico: Em HTML: <body bgcolor= #FF0000 > Em CSS: body {background-color: #FF0000;} Cada estilo é definido como uma regra CSS. Cada regra deve ter a sintaxe: seletor {propriedade: valor;} Seletor: Descreve o elemento ao qual o estilo será aplicado. Propriedade: Descreve a propriedade do elemento a qual deseja-se aplicar o estilo (ex: background-color, font-size). Valor: Descreve a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo Tipos de CSS: Existem três maneiras de aplicar estilos CSS a páginas HTML: Método in-line (atributo style) (css1.html): 2 O World Wide Web Consortium (W3C) é a principal organização de padronização da World Wide Web. Consiste em um consórcio internacional com quase 400 membros, agrega empresas, órgãos governamentais e organizações independentes com a finalidade de estabelecer padrões para a criação e a interpretação de conteúdos para a Web

8 Método interno (tag style) (css2.html): Método externo (link para uma folha de estilos): Método recomendado! Será utilizado nesta disciplina. Uma folha de estilos externa é simplesmente um arquivo.css que contém definições de estilos. Por exemplo, para uma folha de estilos externa chamada style.css criada no diretório style. Cria-se um link no documento HTML (css3.html) para a folha de estilos (style.css). O link é uma simples linha de código HTML: Esta linha deve ser inserida na seção header (entre as tags <head> </head>):

9 Este link informa ao navegador para usar o arquivo CSS apontado na renderização do layout do documento HTML. Vários arquivos HTML podem apontar para um único arquivo CSS. Vantagem: Com um único arquivo CSS é possível controlar o layout de diversas páginas HTML. externo: Veja abaixo como ficará o arquivo style.css utilizado no método Regras CSS para cores: A propriedade color define a cor de primeiro plano de um elemento. Exemplo: Queremos que todos os cabeçalhos de primeiro nível (<h1>) sejam da cor vermelha: A propriedade background-color define a cor de fundo de um elemento. O elemento <body> contém todo o conteúdo da página web. Para mudar a cor de fundo de uma página, devemos aplicar a propriedade background-color ao elemento <body>. Pode-se aplicar cores de fundo a diversos elementos simultaneamente

10 No exemplo a seguir foram aplicadas cores de fundo diferentes para <h1> e <body>. Note que foram aplicadas duas propriedades ao elemento <h1>. Sempre que isso acontecer deve-se separar as propriedades por ponto-evírgula. Exercício: Crie o documento abaixo (exemplo_css.html) e faça as alterações no mesmo de acordo com a considerações abaixo: 1) Utilizando o método externo, faça com que: As tags h1 tenham cor vermelha. As tags h2 tenham cor azul e cor de fundo cinza. As tags h3 tenham cor verde. O corpo do texto tenha cor de fundo preto e cor do texto branca. 2) Salve os estilos criados no exercício 1) em um arquivo externo.css (style.css) e vincule-o ao documento HTML. 3) Faça com que apenas o primeiro parágrafo tenha a cor verde

11 7.5 - A propriedade background: A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML. As propriedades background são as listadas abaixo: background-color...cor do fundo; background-image...imagem de fundo; background-repeat...maneira como a imagem de fundo é posicionada; background-attachment...se a imagem de fundo "rola" ou não com a tela; background-position...como e onde a imagem de fundo é posicionada (local da tela); background...maneira abreviada para todas as propriedades; Valores válidos para as propriedades do fundo: background-color: o código hexadecimal: #FFFFFF o código rgb: rgb(255,235,0) o nome da cor: red, blue, green, etc... o transparente: transparent background-image: o URL: url(caminho/imagem.gif) background-repeat: o não repete: no-repeat o repete vertical e horizontal: repeat o repete vertical: repeat-y o repete horizontal: repeat-x

12 background-attachment: o imagem fixa na tela: fixed o imagem "rola" com a tela: scroll background-position: o x-pos y-pos o x-% y-% o top left o top center o top right o center left o center center o center right o bottom left o bottom center o bottom right Inserindo imagem de fundo: <style type="text/css"> body { background-image: url("arte.gif"); background-repeat: repeat; background-attachment: fixed; } </style> A imagem arte.gif será inserida como fundo de página do documento, será repetida tanto na vertical quanto na horizontal (repeat) e será fixa no fundo, não rolando com a página (fixed)

13 7.6 - Propriedades de Fonte (font-family): 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 do usuário, deverá ser usada a segunda e assim por diante. Existem duas formas de definir fontes: Através do nome da família. Por exemplo: o Arial o Times New Roman o Verdana Através do nome da família genérica. Por exemplo: o serif: o sans-serif: o monospace: Ao listar fontes, recomenda-se começar com uma preferida. Em seguida deve-se listar algumas alternativas. A listagem deve se encerrar com uma família genérica. A propriedade font-style define o estilo da fonte, podendo ser: normal. italic

14 oblique. A propriedade font-weight define o peso da fonte (negrito). A propriedade font-size define o tamanho. O tamanho da fonte pode ser definido de diferentes formas (%, pt,px). (Obs: 1 pt = 1/72 polegada) A propriedade font é um resumo de todas as propriedades de definição de fontes listadas anteriormente. Da mesma forma que com a propriedade background, com font é possível deixar a folha de estilos mais clara e fácil de ser compreendida. Exemplo: Observe as linhas a seguir: Usando "font" consegue-se o mesmo resultado, de modo abreviado: A declaração abreviada deve seguir a seguinte ordem: font-style font-variant font-weight font-size font-family Se uma das propriedades não for declarada ela assume automaticamente o seu valor pãdrão (default)

15 7.7 - Propriedades de Texto: A propriedade text-indent permite que você aplique um recuo à primeira linha de um parágrafo. Resultado: A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Textos podem ser alinhados à esquerda (left), à direita (right), centralizados (center) ou justificados (justify). A propriedade text-decoration possibilita adicionar "efeitos" ou "decoração" em textos. Pode-se colocar, por exemplo, linhas acima do texto, abaixo do texto ou sobre o texto

16 Com a propriedade 'letter-spacing' define-se o espaço entre as letras. A propriedade text-transform controla a capitalização do texto. Existem quatro valores possíveis para essa propriedade: capitalize: Capitaliza a primeira letra de cada palavra. Por exemplo: john doe transforma-se em John Doe. uppercase: Converte todas as letras para maiúscula. Por exemplo: john doe transforma-se em JOHN DOE. lowercase: Converte todas as letras para minúscula. Por exemplo: JOHN DOE transforma-se em john doe. none: Sem trasformações - o texto é apresentado como escrito no código HTML Propriedades de Links: Um link comporta-se como um texto e por isso pode-se aplicar as propriedades vistas anteriormente. A diferença do link é que pode-se definir as propriedades de acordo com o estado do link (visitado, ativo ou com mouse sobre ele)

17 Para isso utiliza-se as pseudo-classes. Uma pseudo-classe permite configurar levando em conta condições diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML. Por exemplo, para configurar um link pode-se fazer: Mas um link pode ter diferentes estados, então faz-se: A pseudo-classe :link é usada para links não visitados. No exemplo a seguir links não vistados serão na cor verde. A pseudo-classe :visited é usada para links visitados. No exemplo a seguir links visitados serão na cor amarela. A pseudo-classe :active é usada para links ativos. No exemplo a seguir links ativos terão seu fundo na cor vermelha. A pseudo-classe :hover é usada para quando o ponteiro do mouse está sobre o link. Por exemplo, podemos mudar a cor do link para laranja e o texto para itálico quando o ponteiro do mouse passa sobre ele

18 Exercício (exemplo2_css.html): Faça os exercícios a seguir utilizando o código HTML apresentado. Crie um arquivo chamado 'estilo2.css' (Método externo) e: 1) Coloque a imagem do arquivo 'papelparede.jpg' como fundo da página e faça com que esse fundo seja repetido em todas as direções e fique fixa na tela, não rolando junto com a página. 2) Faça todo o texto da página ser de cor branca. 3) Faça que a família de todo o texto da página obedeça essa ordem: Verdana, Arial, sans-serif. 4) Faça que todos os cabeçalhos (h1, h2 e h3) fiquem em negrito. 5) Faça os cabeçalhos h2 e h3 em itálico e com espaçamento entre as letras de 10 pixels. 6) Faça os cabeçalhos h1 sublinhados. 7) Controle o tamanho da fonte do cabeçalho h1 como 30pt, do h2 como 24pt e do h3 como 20pt. 8) Coloque um recuo em todos os parágrafos de 26px. 9) Coloque todo o conteúdo do cabeçalho h1 em letras maiúsculas. 10) Coloque apenas as primeiras letras de cada palavra dos cabeçalhos h2 e h3 em maiúsculo, com o restante minúsculo. Maiores informações sobre o uso de css podem ser obtidas em

19 Exercício Extra de CSS (exemplo3_css.html): Faça os exercícios a seguir utilizando o código HTML apresentado. Crie um arquivo chamado 'estilo3.css' (Método externo) e: 1) Coloque a imagem do arquivo 'papelparede.jpg' como fundo da página e faça com que esse fundo seja repetido somente na horizontal e "role" junto com o conteúdo da página. Defina também a cor de fundo de página como preta. 2) Faça todo o texto da página ser de cor amarela. 3) Faça que a família de todo o texto da página obedeça essa ordem: Tahoma, Arial, sans-serif. 4) Faça que os cabeçalhos (h1 e h2) fiquem em negrito e sublinhados. 5) Faça o cabeçalho h1 com espaçamento entre as letras de 15 pixels e centralizado. 6) Faça os cabeçalhos h3 ficarem tachados (com uma linha sobre o texto). 7) Controle o tamanho da fonte do cabeçalho h1 como 60pt e do h2 e h3 como 30pt

20 8) Coloque um recuo de 30px e alinhamento justificado em todos os parágrafos. 9) Coloque todo o conteúdo do cabeçalho h1 em letras maiúsculas, todo o conteúdo do cabeçalho h3 em minúsculas e coloque apenas as primeiras letras de cada palavra do cabeçalho h2 em maiúsculo. 10) Crie no arquivo exemplo3_css.html um link para o site da Universo ( de forma que o mesmo abra em uma nova página/aba. No arquivo estilo3.css defina os links da seguinte maneira: cor azul para os links não visitados, cor vermelha para os links visitados e quando o ponteiro do mouse estiver sobre o link, o mesmo fique na cor branca, com o fundo vermelho, em itálico e com o tamanho da fonte igual a 20px. Bom trabalho!!!

Comandos Extras Formatações no CSS

Comandos Extras Formatações no CSS Comandos Extras Formatações no CSS Propriedade 'background-color': A propriedade background-color define a cor do fundo de um elemento. Propriedade 'color': A propriedade color define a cor do primeiro

Leia mais

Sintaxe Básica da Linguagem CSS

Sintaxe Básica da Linguagem CSS Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,

Leia mais

Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]

Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a] Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 05/05/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Apontamentos de Folhas

Leia mais

XTHML. 2. A finalidade do XHTML é substituir o HTML; 3. Vantagens de se usar XHTML (Compatibilidade com futuras aplicações);

XTHML. 2. A finalidade do XHTML é substituir o HTML; 3. Vantagens de se usar XHTML (Compatibilidade com futuras aplicações); 1. XHTML TEM SUA ORIGEM NO XML; 2. A finalidade do XHTML é substituir o HTML; 3. Vantagens de se usar XHTML (Compatibilidade com futuras aplicações); 4. XHTML é uma "Web Standard ; Neste link (http://www.maujor.com/w3c/xhtml10_2ed.html)

Leia mais

CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira

CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário

Leia mais

IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links

IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links Propriedades básicas para fontes: color: cor da fonte font-family: tipo de fonte font-size: tamanho

Leia mais

HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo

HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor

Leia mais

#Trabalhando com Texto

#Trabalhando com Texto INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Trabalhando com Texto Eliezio Soares elieziosoares@gmail.com Aula de Hoje Web

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 CSS - Cascading Style Sheets Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar

Leia mais

Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS

Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS CSS Web Design - CSS Conteúdo - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS 01 Assunto: CSS O que é CSS? CSS é a sigla para Cascading Style Sheets, que pode ser traduzida para

Leia mais

PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues

PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues PROGRAMADOR WEB PROF. Esp. Andrew H. G. Rodrigues CSS - CASCADING STYLE SHEETS Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar a seguinte sintaxe:

Leia mais

Cascading: Style Sheet

Cascading: Style Sheet André Kawamoto 2010 O que é CSS Cascading: Múltiplos estilos podem se sobrepor para especificar uma variedade de estilos desde um website inteiro até um único elemento. Qual estilo é aplicado diz respeito

Leia mais

Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Exemplo: h1, h2, h3, h4, h5, h6 { color: #00FF00; }

Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Exemplo: h1, h2, h3, h4, h5, h6 { color: #00FF00; } CENTRO PASTORAL, EDUCACIONAL E ASSISTENCIAL DOM CARLOS CPEA Reconhecido de Utilidade Pública pelo Decreto No. 5.692 de 08.11.1967 FACULDADE VIZINHANÇA VALE DO IGUAÇU VIZIVALI DOIS VIZINHOS PARANÁ Criada

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web IntroduçãoàTecnologiaWeb XHTML extensiblehypertextmarkuplanguage Revisão ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger XHTMLRevisão Índice 1 extensible HTML (XHTML)... 2 1.1 Diferenças entre

Leia mais

INTRODUÇÃO AO CSS. HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.

INTRODUÇÃO AO CSS. HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. INTRODUÇÃO AO CSS O que é CSS? Talvez você já tenha ouvido falar em CSS, mas não saiba o que significa exatamente. Nesta lição você saberá o que é e para que serve CSS. CSS é a abreviatura para Cascading

Leia mais

PROGRAMAÇÃO EM AMBIENTE WEB I

PROGRAMAÇÃO EM AMBIENTE WEB I PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em

Leia mais

Aula 3 - Parte Final HTML e CSS

Aula 3 - Parte Final HTML e CSS Universidade Federal do Paraná - UFPR 16 de Agosto de 2010 Div 1 Div 2 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um

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

Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padrões Web, por Maurício Samy Silva

Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padrões Web, por Maurício Samy Silva CSS Site do Maujor Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padrões Web, por Maurício Samy Silva :: A propriedade text :: Os textos nos elementos HTML As propriedades para

Leia mais

INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO

INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os

Leia mais

Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?

Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web? Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais

Leia mais

Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano

Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Programação para Internet Rica 1 Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Objetivo: Apresentar conceitos de introduzir o uso de Folhas de Estilo em Cascata. Bibliografia: W3, 2009; CASCADE,

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

06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA

06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em

Leia mais

TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão

TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos

Leia mais

IFSC/Florianópolis - prof. Herval Daminelli

IFSC/Florianópolis - prof. Herval Daminelli Existem cinco pseudoclasses associadas ao estado de um link. São elas: a:link - define o estilo do link no estado inicial; a:visited - define o estilo do link visitado; a:hover - define o estilo do link

Leia mais

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,

Leia mais

Desenvolvimento Web. Professor: Bruno E. G. Gomes

Desenvolvimento Web. Professor: Bruno E. G. Gomes Instituto Federal de Educação Ciência e Tecnologia Curso Técnico Integrado em Informática Campus Currais Novos Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno E. G. Gomes 2013 Introdução

Leia mais

Estilo em Aplicações Hipermídia na Web

Estilo em Aplicações Hipermídia na Web SCC0265 Sistemas Interativos Web Estilo em Aplicações Hipermídia na Web Renata Pontin M. Fortes (renata@icmc.usp.br) PAE: Willian Watanabe (watinha@gmail.com) Instituto de Ciências Matemáticas e de Computação

Leia mais

13 de dezembro de 2012

13 de dezembro de 2012 ao ao Universidade Federal Fluminense 13 de dezembro de 2012 ao 1 2 3 4 5 6 7 Informações principais ao Quando o HTML surgiu, seu objetivo era especialmente a estruturação de informações na página. Com

Leia mais

Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva

Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser

Leia mais

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Folhas de estilos em cascata Objetivo Formatar páginas escritas em HTML baseada nos padrões "Cascading Style Sheets",

Leia mais

CSS. Karen Frigo Busolin

CSS. Karen Frigo Busolin CSS Karen Frigo Busolin O que é CSS? Significa Cascading Style Sheets Estilos define como mostrar elementos HTML Estilos foram adicionandos no HTML 4.0 Estilos na solução de problemas HTML nunca deve a

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) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Parte I CSS Basic 2 CSS Determina como elementos

Leia mais

HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011

HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 HTML? INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 1 Hypertext Markup Language (Linguagem de

Leia mais

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos

Leia mais

1) Em um documento separado fora de todos os documentos HTML;

1) Em um documento separado fora de todos os documentos HTML; Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte

Leia mais

Treinamento em CSS. Índice

Treinamento em CSS. Índice Nível: Básico Horas: 2 Treinamento em CSS Índice Índice...1 Introdução...2 Formantando documentos...2 O que é CSS?...2 Por que utilizar CSS?...2 Separando o sistema em camadas...3 Vinculando um arquivo

Leia mais

Tarlis Portela Web Design HTML

Tarlis Portela Web Design HTML Tarlis Portela Web Design HTML HTML Definição HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) ; É uma linguagem de marcação utilizada

Leia mais

F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07

F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos

Leia mais

Desenvolvimento Web. CSS Conceitos básicos parte I. Professor: Bruno Gomes

Desenvolvimento Web. CSS Conceitos básicos parte I. Professor: Bruno Gomes INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno Gomes 2011 INTRODUÇÃO O

Leia mais

A diferença entre um site que implementa CSS e outro que não o usa é gigantesca e notável.

A diferença entre um site que implementa CSS e outro que não o usa é gigantesca e notável. Aula 02 - Introdução ao css ( folhas de estilo ) CSS é a sigla para o termo em inglês Cascading Style Sheets que, traduzido para o português, significa Folha de Estilo em Cascatas. O CSS é fácil de aprender

Leia mais

Dreamweaver CC_15x21.indd 1 06/04/ :04:22

Dreamweaver CC_15x21.indd 1 06/04/ :04:22 Dreamweaver CC_15x21.indd 1 06/04/2015 11:04:22 SUMÁRIO INTRODUÇÃO... 3 CAPÍTULO 1 Iniciando e conhecendo o Dreamweaver... 8 Interfaces... 21 Criando e configurando sites... 22 CAPÍTULO 2 Criando arquivos...

Leia mais

Guia de Bolso HTML e XHTML

Guia de Bolso HTML e XHTML Guia de Bolso HTML e XHTML Este guia de bolso oferece uma listagem concisa, porém abrangente, dos elementos e atributos especificados nas Recomendações HTML 4.01 e XHTML 1.0. O texto utiliza a abreviação

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

Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.

Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html

Leia mais

COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS

COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS COM222 DESENVOLVIMENTO DE SISTEMAS WEB Aula 01: HTML e CSS 2 Conteúdo Noções introdutórias HTML CSS HTML: HyperText Markup Language 3 Linguagem usada para construir páginas Web Função principal Estruturar

Leia mais

TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo

TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo TECNOLOGIA WEB XHTML Aula 5 Profa. Rosemary Melo HTML (Hiper Text Markup Language) Linguagem de marcação de hipertexto Comum especificar o conteúdo do documento e sua formatação em um só documento HTML.

Leia mais

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML Módulo 17E Revisões de HTML A) Noções básicas de HTML Estrutura básica de um documento Um documento HTML começa com a tag de abertura e termina com a tag de fecho . De seguida, temos a considerar

Leia mais

Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis uma relação das principais:

Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis uma relação das principais: O que significa a sigla CSS? CSS é a sigla para Cascading Style Sheets que em português foi traduzido para folhas de estilo em cascata e nada mais é que um documento desenvolvido em uma linguagem de programação

Leia mais

Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho

Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível

Leia mais

CSS CASCADING STYLE SHEET

CSS CASCADING STYLE SHEET CSS CASCADING STYLE SHEET CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB 1 PROF. ALEXANDRO DOS SANTOS SILVA 1 SUMÁRIO Conceito Sintaxe básica Tipos de folhas de estilos 2 1 CSS

Leia mais

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada

Leia mais

Revisando os conteúdos. Introdução ao CSS

Revisando os conteúdos. Introdução ao CSS Aula 04 Revisando os conteúdos Tag : fornece informações sobre o documento, palavras-chaves, autor da página, última atualização, etc. Essas informações não são mostradas na página, apenas processadas

Leia mais

Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho

Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho

Leia mais

HTML, CSS e JavaScript

HTML, CSS e JavaScript HTML, CSS e JavaScript Contato: Site: http://professores.chapeco.ifsc.edu.br/lara/ 1 Arquivo externo Dentro da tag head: 2 Qual a dirença

Leia mais

Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação.

Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação. Porque usar css? Cascading Style Sheets (css) sobrepõe as características padrões dos browsers São usadas para melhorar e controlar a aparência de uma página web. Porque usar css? Permite que o conteúdo

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

<HTML> Vinícius Roggério da Rocha

<HTML> Vinícius Roggério da Rocha Vinícius Roggério da Rocha www.monolitonimbus.com.br O que é HTML? HTML = HyperText Markup Language ou Linguagem de Marcação de Hipertexto Linguagem: maneira de se comunicar (entre máquinas, pessoas

Leia mais

AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos

AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema

Leia mais

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS INTRODUÇÃO E MANIPULANDO FONTES

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS INTRODUÇÃO E MANIPULANDO FONTES INTRODUCAO DESENVOLVIMENTO E DESIGN DE CSS INTRODUÇÃO E MANIPULANDO FONTES Introdução CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). Não seria ótimo fazer layouts na sua página sem

Leia mais

MÓDULO 1: Tags: estrutura; tipos; atributos. Estrutura de um documento. Tags de blocos: <?xml?>, <!DOCTYPE>, <html>, <head>, <body>, <body bgcolor>.

MÓDULO 1: Tags: estrutura; tipos; atributos. Estrutura de um documento. Tags de blocos: <?xml?>, <!DOCTYPE>, <html>, <head>, <body>, <body bgcolor>. MÓDULO 1: Tags: estrutura; tipos; atributos. Estrutura de um documento. Tags de blocos: , , , , , . Conceitos básicos do funcionamento da Internet Internet

Leia mais

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com

Leia mais

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet CSS Celso Olivete Júnior olivete@fct.unesp.br HTML Formatando o documento... Formulário Responsável por fazer a interação entre os dados fornecidos pelo usuário

Leia mais

HyperText Markup Language HTML. Tabela

HyperText Markup Language HTML. Tabela HyperText Markup Language HTML Tabela Prof. Luis Nícolas de morim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Tabela consiste em uma estrutura de

Leia mais

Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano

Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano Programação Web 1 Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano Objetivo: Apresentar os parâmetros básicos que podem ser modificados com a tecnologia CSS. Bibliografia: W3, 2009;

Leia mais

CSS EXTERNO. <head> <link href="estilo.css" type="text/css" rel="stylesheet" /> </head>

CSS EXTERNO. <head> <link href=estilo.css type=text/css rel=stylesheet /> </head> CSS DDW CSS EXTERNO O CSS é um arquivo que visa personalizar o modo como seu HTML aparece para o usuário. Ele deve ser chamado dentro da tag no topo do site.

Leia mais

Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral

Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral Surgimento do CSS Na aula passada tivemos uma breve introdução ao CSS Os documentos web, cada vez mais sofisticados e extensos, estavam fugindo

Leia mais

REDES DE COMUNICAÇÃO. 11º - ANO Professor: Rafael Henriques

REDES DE COMUNICAÇÃO. 11º - ANO Professor: Rafael Henriques 16-01-2019 Redes de Comunicação - Prof. Rafael Henriques 1 REDES DE COMUNICAÇÃO 11º - ANO Professor: Rafael Henriques E-mail: prof@rafaelhenriques.com Apresentação módulos 4 - Desenvolvimento de Páginas

Leia mais

Introdução ao CSS. Programação para a Internet. Prof. Vilson Heck Junior

Introdução ao CSS. Programação para a Internet. Prof. Vilson Heck Junior Introdução ao CSS Programação para a Internet Prof. Vilson Heck Junior Estilos de Páginas CSS Cascading Style Sheets: Estilos de Página em Cascata (trad. livre); É uma linguagem de estilos Define a apresentação

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

17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce

17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,

Leia mais

CASCADING STYLE SHEETS (CSS)

CASCADING STYLE SHEETS (CSS) UI MARIA LENIR ARAÚJO MENESES Prof Esp. Leonardo Delgado Aula 02: CASCADING STYLE SHEETS (CSS) Unidade IV Aluno: Data: / / CASCADING STYLE SHEETS (CSS) O CSS é uma linguagem de estilo que foi desenvolvida

Leia mais

CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW

CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW 2017.2 1 CSS: ementa Texto Fontes Links Ícones Listas Tabelas DPW 2017.2 2 / 18 CSS: text Definição Formatar o texto quanto

Leia mais

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

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

Leia mais

Introdução ao HTML André Luiz Silva de Moraes Instituto Federal de Santa Catarina

Introdução ao HTML André Luiz Silva de Moraes Instituto Federal de Santa Catarina Introdução ao HTML André Luiz Silva de Moraes Hypertext Markup Language Linguagem de Marcação de Hipertexto Padroniza a Escrita do texto Permite que um navegador reconheça elementos para inserir em uma

Leia mais

Vamos ver como fica no código HTML e CSS na Listagem 1 abaixo:

Vamos ver como fica no código HTML e CSS na Listagem 1 abaixo: Título: Alinhamento Central com CSS Descrição: Neste artigo serão mostrados os atributos e recursos necessários para alinhamentos de elementos inscritos no HTML, que no caso é o CSS. Login: alcideswenner

Leia mais

Web Design Aula 15: Propriedades CSS

Web Design Aula 15: Propriedades CSS Web Design Aula 15: Propriedades CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Propriedades de texto Propriedades de Cores Propriedades de Bordas Propriedades de Listas Cor de

Leia mais

Prof. Fernando Gonçalves Abadia. Sistemas Multimídias

Prof. Fernando Gonçalves Abadia. Sistemas Multimídias Prof. Fernando Gonçalves Abadia Sistemas Multimídias Títulos Títulos são definidos com as tags a . A define o título maior. A define o título menor. este é um título este

Leia mais

Informática Parte 21 Prof. Márcio Hunecke

Informática Parte 21 Prof. Márcio Hunecke Escriturário Informática Parte 21 Prof. Márcio Hunecke Informática CSS 3 É no CSS (Cascading Style Sheets) que se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um

Leia mais

Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe:

Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe: Css CSS (Style Sheets Cascating - Folhas de Estilo em Cascata) é um estilo criado para melhorar a formatação de textos, imagens, links, tabelas, formulários e etc das suas páginas HTML. o CSS também facilita

Leia mais

Recursos Complementares (Tabelas e Formulários)

Recursos Complementares (Tabelas e Formulários) Linguagem de Programação para Web Recursos Complementares (Tabelas e Formulários) Prof. Mauro Lopes 1-31 30 Objetivo Nesta aula iremos trabalhar o conceito de tabelas e todas as tags associadas ao seu

Leia mais

PROGRAMAÇÃO EM AMBIENTE WEB I

PROGRAMAÇÃO EM AMBIENTE WEB I PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,

Leia mais

Programação Web Aula 2 XHTML/CSS/XML

Programação Web Aula 2 XHTML/CSS/XML Programação Web Aula 2 XHTML/CSS/XML Departamento de Informática UFPR 17 de Fevereiro de 2014 1 Histórico 2 Funcionamento 3 Atributos 4 HTML5 Estrutura de uma arquivo HTML5 Validação Tags básicas Seleção

Leia mais

PROFESSORA MERRIS MOZER. Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

PROFESSORA MERRIS MOZER. Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 1 HTML INTRODUÇÃO O que é HTML? INTRODUÇÃO HTML ou Hypertext

Leia mais

Aula 8 Formatando o texto (propriedades)

Aula 8 Formatando o texto (propriedades) Aula 8 Formatando o texto (propriedades) Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1 Estilizar o texto? 2 font-family body { font-family: Arial; } dt { font-family: Courier, monospace; } p { font-family:

Leia mais

TECNOLOGIA WEB INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML

TECNOLOGIA WEB INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML 1 INTRODUÇÃO TECNOLOGIA WEB Começaremos desvendando o poder do desenvolvimento de aplicações baseadas na Web com a XHTML (Extensible HyperText Markup

Leia mais

Cascading Style Sheets CSS

Cascading Style Sheets CSS Cascading Style Sheets CSS Sistemas de Informação André Monteiro de Oliveira Restivo E-mail: andre.restivo@fe.up.pt URL: www.fe.up.pt/~arestivo/aulas/sinf André Restivo SINF 2003/2004 CSS: 1 CSS: O que

Leia mais

HTML (HyperText. Markup Language)

HTML (HyperText. Markup Language) Pontifícia Universidade Católica do Rio Grande do Sul PUCRS Faculdade de Informática HTML (HyperText Markup Language) Prof. Fabiano Passuelo Hessel Profª. Leticia Lopes Leite Julho de 2002. 1. Introdução

Leia mais

TP1 - TÉCNICAS DE PROGRAMAÇÃO PARA INTERNET I. Profª Eulaliane Gonçalves

TP1 - TÉCNICAS DE PROGRAMAÇÃO PARA INTERNET I. Profª Eulaliane Gonçalves TP1 - TÉCNICAS DE PROGRAMAÇÃO PARA INTERNET I Profª Eulaliane Gonçalves COMPETÊNCIAS 1. Interpretar e desenvolver páginas para Web. HABILIDADES 1.1. Coletar dados e informações de usuários para elaboração

Leia mais

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Apresentar a tag DIV Capacitar para a

Leia mais

HTML: INTRODUÇÃO TAGS BÁSICAS

HTML: INTRODUÇÃO TAGS BÁSICAS HTML: INTRODUÇÃO TAGS BÁSICAS CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB I PROF. ALEXANDRO DOS SANTOS SILVA 1 1 SUMÁRIO Definição Editores HTML Estrutura básica de um documento

Leia mais

XML: uma introdução prática X100. Helder da Rocha

XML: uma introdução prática X100. Helder da Rocha XML: uma introdução prática X100 Helder da Rocha (helder@argonavis.com.br) Atualizado em setembro de 2001 1 Apresentação do XML Por que apresentar os dados? Impressão Web Verificação Edição Soluções Cascading

Leia mais

Tarlis Portela Web Design CSS

Tarlis Portela Web Design CSS Tarlis Portela Web Design CSS Web Design CONCEITOS 01 01 Histórico Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação; A medida que o HTML foi se popularizando e evoluindo,

Leia mais

CSS Folha de Estilo em Cascatas

CSS Folha de Estilo em Cascatas O que é CSS? CSS é a abreviatura para Cascading Style Sheets. Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores,

Leia mais

Desenvolvimento Web CSS Conceitos básicos parte II

Desenvolvimento Web CSS Conceitos básicos parte II Desenvolvimento Web CSS Conceitos básicos parte II Prof.: Bruno E. G. Gomes 2014 Folhas de Estilo Externa Estilos são definidos em um arquivo separado e incorporados à página através da tag link Podem

Leia mais