3. Formulários e Folhas de Estilo em XHTML

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

Download "3. Formulários e Folhas de Estilo em XHTML"

Transcrição

1 3. Formulários e Folhas de Estilo em XHTML! Formulários introduzem em páginas XHTML a possibilidade de interação com o usuário. A informação introduzida em um formulário pode ser submetida para tratamento por um servidor Web ou ser tratada diretamente no lado cliente por uma linguagem de script, como JavaScript.! O primeiro padrão para tratamento de informação pelo lado servidor foi o CGI (Common Gateway Interface), para servidores baseados em Unix. Embora qualquer linguagem possa ser usada para escrever programas CGI, a mais utilizada é a linguagem Perl (http://www.perl.com/).! Atualmente, as linguagens ASP (Active Server Pages) e JSP (Java Server Pages) e PHP permitem que programas sejam incluídos em páginas de forma similar a scripts. A linguagem ASP é suportada pelo servidor IIS (Internet Information Server), enquanto JSP e PHP são suportadas pelos servidores IIS e Apache.! Para incluir um formulário em uma página XHTML devem ser usados os marcadores <form> e </form> dentro do elemento <body>. O elemento <form> pode ter os seguintes atributos: " action: define a URL que irá receber os dados do formulário. Normalmente a URL será o endereço de uma página ou de um script, mas não precisa, necessariamente, usar o protocolo HTTP. Por exemplo: <form action= ELFS,

2 " method: define o método usado para envio do formulário; valores possíveis: GET ou POST. " name: nome do formulário, para ser referenciado em outras partes do documento (por exemplo: scripts) " target: nome do frame onde os dados devem ser processados " enctype: define o mecanismo utilizado para codificar os dados a serem enviados. Submissão de Formulários! Normalmente, um formulário contém um botão do tipo submit para o envio dos dados do formulário ao servidor. Cada dado a ser enviado é da forma: nome=valor, onde nome identifica o componente do formulário (uma caixa de texto, um botão de rádio, etc) e valor corresponde ao valor atribuído ao componente (o conteúdo de uma caixa de texto, o valor de um botão de rádio, etc). Para transmitir mais de um valor é utilizado o símbolo & entre cada par (nome, valor). Espaços em branco são codificados como +. Os caracteres _. *) são codificados como seu valor hexadecimal precedido do símbolo % (por exemplo:! = %21).! Existem duas maneiras de enviar dados ao servidor: " O método GET: os dados codificados são adicionados ao final da URL e enviados ao servidor. ELFS,

3 " O método POST: os dados codificados são enviados juntamente com o cabeçalho HTTP da página.! O método POST é preferível em relação ao método GET pelas razões: " POST pode tratar uma quantidade ilimitada de informação, enquanto GET está limitado ao tamanho máximo de uma URL " GET é menos seguro, pois como os dados são enviados junto com a URL, os dados são visíveis na barra de endereço do navegador! O método GET, no entanto, permite reenviar os dados de um formulário armazenados no cache do navegador (pois os dados fazem parte da URL). Exemplo: aula03_01.htm <html> <head><title>formulário XHTML</title></head> <body> <h3>digite seu nome:</h3> <form method="post"> <input type="text" name="cliente" /> <input type="submit" value="enviar" /> </form> </body> </html> ELFS,

4 Exercício: Altere o valor do atributo action do formulário para: e veja a resposta do servidor. Controles em Formulários! Os elementos <input> permitem que as informações possam ser fornecidas de diversas maneiras. Os diversos tipos associados ao elemento <input> são conhecidos como controles de formulários. Os controles de formulários podem usar os seguintes atributos: " name: define o nome do controle. " value: estabelece o valor a ser enviado ao servidor; para um botão, corresponde ao texto exibido na face do botão. " disabled: permite desabilitar um controle (disabled= disabled ).! O elemento <input> pode assumir os seguintes tipos: text, password, file, submit, reset, button, image, checkbox, radio, hidden. Controle <input> do tipo texto! Controles do tipo texto permitem que o usuário digite um texto no formulário. Um controle do tipo texto é estabelecido com o elemento <input> com o atributo type assumindo um dos seguintes valores: " text: uma caixa de texto simples. " password: o texto digitado não é mostrado. ELFS,

5 " file: inroduz no formulário uma caixa de texto (onde deve-se digitar o nome de um arquivo) e um botão Browse com código embutido, que pode ser usado para localizar o arquivo.! Controles do tipo texto podem ter os seguintes atributos: " size: tamanho da caixa (size="n") " maxlength: número máximo de caracteres que a caixa pode conter (maxlength="n") " readonly: o conteúdo da caixa só pode ser lido, mas não modificado (readonly= readonly") Exemplo: aula03_02.htm <html> <head> <title>formulário XHTML</title> </head> <body> <h3>controles de Texto</h3> <form method="post"> <div>digite seu login:</div> <input type="text" name="usuario" value="[login]" /> ELFS,

6 <div>digite sua senha:</div> <input type="password" name="senha" /> <div>selecione um arquivo:</div> <input type="file" name="usuario" /> <br /> <input type="submit" value="enviar" /> </form> </body> </html> Controle <input> do tipo botão! Pode assumir os seguintes tipos (valor do atributo type): " submit: permite transmitir todos os pares (nome, valor) ao servidor " reset: permite que todos os controles assumam seus valores de definição (ou um valor em branco, se não houver valor de definição) " button: um botão comum (o atributo value define o texto da face); não envia nada ao servidor (para ser útil deve ser usado com scripts) " image: deve ter os atributos src e alt; ao ser clicado, envia ao servidor todos os pares (nome, valor) juntamente com a coordenada do ponto onde houve o clique na imagem. ELFS,

7 Exercício: Reproduzir a página ao lado. aula03_03.htm Controle <input> do tipo botão de rádio! Pode ser dos seguintes tipos: " checkbox: caixa de seleção; o atributo checked= checked pode ser usado para que a caixa de seleção apareça selecionada inicialmente; em um formulário vários elementos checkbox podem ter o mesmo nome e, neste caso, todas as caixas selecionadas serão enviadas ao servidor. " radio: diferentemente dos elementos checkbox, se diversos elementos radio tiverem o mesmo nome estes elementos serão mutuamente exclusivos, ou seja, somente um par (nome, valor) será enviado ao servidor. Exercício: Reproduzir a página ao lado. aula03_04.htm ELFS,

8 Controle <input> do tipo hidden! Elementos <input> do tipo hidden têm um papel importante em formulários. Estes elementos não podem ser vistos ou editados pelos usuários, mas podem armazenar informação em um formulário. Desabilitação de elementos <input>! Qualquer elemento <input> pode ser desabilitado utilizando-se o atributo disabled. Por exemplo: <input type="button" disabled="true" /> Elemento <textarea>! Este elemento corresponde a uma grande caixa onde o usuário poderá digitar um texto que ocupa várias linhas. O tamanho da caixa é definido pelos atributos cols e rows. Barras de rolagem serão acrescentadas automaticamente se o texto for maior do que o tamanho da caixa. Elementos <select> e <option>! Os elementos <select> e <option> são usados para definir uma caixa de seleção. A caixa de seleção terá tantos itens quantos forem os elementos <option> existentes entre os elementos <select> e </select>. O atributo size do elemento <select> define quantas escolhas serão exibidas ao usuário e se há necessidade de barra de rolagem para exibir as demais. ELFS,

9 O atributo multiple do elemento <select> indica se mais de uma seleção é possível (multiple= true ). Exercício:! Reproduzir o formulário ao lado. Note que o Ramo de Atividade Indústria deve estar selecionado inicialmente. Considere que as opções de Estado são: SP, RJ, MG e RS. aula03_05.htm ELFS,

10 Folhas de Estilo! Folhas de estilo são utilizadas em documentos XHTML para atribuir diversas propriedades ao mesmo tempo aos elementos de uma página. Por exemplo, fazer com que todos os títulos de nível 1 da página (<h1>) sejam apresentados usando fonte Arial de tamanho 18 e na cor azul.! A linguagem mais utilizada para definir estilos em um documento XHTML é a CSS (Cascading Style Sheets).! Vantagens em utilizar folhas de estilo: " Pode-se alterar completamente a aparência de um documento com pouco esforço, pois estilos permitem a separação da parte funcional de um documento de seus aspectos de apresentação, definidos nas folhas de estilo. " Uma mesma folha de estilos pode ser aplicada a diversos documentos. " Os marcadores no documento tornam-se mais simples (com menos atributos e propriedades) e as páginas tornam-se mais compreensíveis e podem ser mantidas mais facilmente. " É possível um controle melhor da apresentação dos documentos, pois algumas propriedades de folhas de estilo não têm equivalentes em marcadores XHTML. " Melhor adaptação a diferentes navegadores, pois como a apresentação do documento é definida separadamente, pode-se criar para um mesmo ELFS,

11 documento, estilos específicos para diferentes navegadores. Por exemplo, para navegadores clássicos (como Netscape e Internet Explorer) pode-se enfatizar as cores, fontes ou tamanhos, enquanto que para um sintetizador de voz, a tonalidade e o volume podem ser enfatizados. " As propriedades das folhas de estilo podem ser herdadas de um elemento para outro. Por exemplo: Se em um parágrafo com propriedades definidas em uma folha de estilo para ser apresentado com fonte Arial de tamanho 14 e na cor azul for incluído um atributo ou uma outra propriedade para que o texto seja apresentado em negrito, o texto será apresentado em negrito, com fonte Arial de tamanho 14 e na cor azul.! Desvantagem em utilizar folhas de estilo " Nem todas as propriedades de folhas de estilo são interpretadas corretamente pelos navegadores atuais. Para verificar as propriedades de folhas de estilo interpretadas pelos navegadores pode-se consultar: Criação e Definição de Folhas de Estilo elemento ao qual o estilo se aplica ponto-e-vírgula separando as propriedades p {font-size:12; font-style: italic; color:blue} propriedade valor da propriedade ELFS,

12 ! A criação de estilos é feita utilizando a seguinte sintaxe: elemento ao qual o estilo se aplica, seguido da lista de propriedades e seus respectivos valores a serem aplicadas ao elemento delimitada por chaves { e }. Dentro da lista, os pares propriedade:valor são separados por pontos-e-vírgulas. Para folhas de estilo, não existe diferença entre letras maiúsculas e minúsculas.! Estilos podem ser definidos em três níveis: local, interno e externo. Um documento pode usar estilos de qualquer nível. Estilos locais anulam estilos internos e estilos internos anulam estilos externos. Definição de Estilos Locais! Estilo local é o definido dentro de elementos de uma página. Por exemplo: aula03_06.htm <html> <head><title>estilos Locais</title></head> <body> <h1>estilos Locais</h1> <p style="font-size:150%">parágrafo mostrado com fonte maior do que o normal.</p> <p style="color:blue">parágrafo mostrado com fonte de tamanho normal, mas na cor azul.</p> </body> </html> ELFS,

13 ! A definição de estilos locais pode ser feita com o elemento <span> para indicar que o estilo se aplica apenas a uma parte de um elemento. Por exemplo: aula03_07.htm <html> <head><title>estilos Locais</title></head> <body> <h1>estilos Locais</h1> <p>este parágrafo mostra que estilos podem ser aplicados a <span style="font-size:150%; color:blue"> apenas algumas partes</span> do elemento.</p> </body> </html>! A definição de estilos locais pode ser feita também com o elemento <div> para indicar que o estilo se aplica a todos os elementos internos à divisão. Por exemplo, a página: ELFS,

14 pode ser obtida com: aula03_08.htm <html> <head><title>estilos Locais</title></head> <body> <h1>estilos Locais</h1> <div style="font-name:arial; font-size:150%; color:red"> <p>este é o primeiro parágrafo.</p> <p>este é o segundo. Note que o mesmo estilo se aplica a ambos os parágrafos.</p> </div> </body> </html> Definição de Estilos Internos! A definição de estilos internos deve ser feita entre os elementos <style> e </style> e dentro do elemento <head> da página. Por exemplo: aula03_09.htm <html> <head> <title>estilos Internos</title> <style type="text/css"> p {font-family:arial; font-style:italic; font-size:90%} ELFS,

15 h1 {color:blue} h2 {color:red; font-size:120%} b {color:green} </style> </head> <body> <h1>apresentação de Documentos<br /> <b>definida em folha de estilo</b></h1> <h2>título de nível 2</h2> <p>este é o primeiro parágrafo.</p> <p>este é o segundo. Note que o <b>mesmo estilo</b> se aplica a ambos os parágrafos.</p> </body> </html> ELFS,

16 ! É possível atribuir uma mesma definição de estilo para vários elementos. Por exemplo: h1, h2, h3 { color:blue }, faz com que os títulos de níveis 1, 2 e 3 sejam apresentados na cor azul. Definição de Estilos Externos! A definição de estilos pode ser feita em um documento separado (que, normalmente, tem a extensão.css). O elemento <link> deve ser utilizado para aplicar uma folha de estilo ao documento, com a atributo href definindo a URL da folha de estilos externa. Por exemplo: Note que este documento não tem informações de estilo. O estilo é importado de um arquivo externo. aula03_10.htm <html> <head> <title>estilos Externos</title> <link rel="stylesheet" href="meu_estilo.css" /> </head> <body> <h1>apresentação de Documentos<br /> <b>definida em folha de estilo</b></h1> <h2>título de nível 2</h2> <p>este é o primeiro parágrafo.</p> <p>este é o segundo. Note que o <b>mesmo estilo</b> se aplica a ambos os parágrafos.</p> </body> </html> ELFS,

17 p {font-family:arial; font-style:italic; font-size:90%} h1 {color:blue} h2 {color:red; font-size:120%} b {color:green} meu_estilo.css! Exercício: Verificar o resultado obtido pela página aula03_10.htm, que usa o arquivo de folha de estilo meu_estilo.css, e compare com a página obtida pelo documento aula03_09.htm. Herança de Propriedades em Folhas de Estilo! A página a seguir será construída usando estilos externo, interno e local. ELFS,

18 p {font-family:arial; font-size:150%} h1 {color:blue} h2 {color:red; font-size:120%} b {color:green} um_estilo.css aula03_11.htm <html> <head> <title>herança de Estilos</title> <link rel="stylesheet" href="um_estilo.css" /> Note que estilos <style type="text/css"> definidos externamente body {font-style: italic} são redefinidos como p {color: red} estilo interno e mesmo como estilo local. </style> </head> <body> <h1>apresentação de Documentos<br /> <b>definida em folhas de estilo</b></h1> <h2 style="color:black">título de nível 2</h2> <p style="font-family=courier">este primeiro parágrafo tem a fonte definida em estilo local, o estilo e a cor da fonte definido em estilo interno, e o tamanho da fonte definido em estilo externo.</p> ELFS,

19 <p>este é o segundo parágrafo. Note que a ele se aplicam somente os <b>estilos interno e externo</b> não havendo definição de estilo local ao parágrafo.</p> </body> </html> Algumas Propriedades de Folhas de Estilo! Cores. A maneira mais fácil de estabelecer o valor da propriedade color é usar um dos 16 nomes das cores padrão da paleta de cores VGA: aqua, black, blue, fuchsia, grey, green, lime, maroon, navy, olive, purple, red, teal, silver, white, yellow. Outra possibilidade é especificar a cor desejada por um valor RGB hexadecimal, por exemplo: color:# ! Ligações Hipertexto. Os elementos a:link, a:visited e a:active estabelecem a apresentação de ligações não visitadas, visitadas e que se está tentando visitar no momento. Exemplos: text-decoration:none (suprime o sublinhado de uma ligação), background-color:uma-cor (adiciona uma cor de fundo a uma ligação).! Textura de Fundo. Estabelecida pela propriedade backgound-image do elemento body. O valor da propriedade deve ser escrito como url(arquivode-imagem). Exemplo: body {background-image:url(gato.gif)}. ELFS,

20 Outras propriedades: background-position (valores possíveis: top, bottom, left, center, right, podendo haver combinações consistentes de valores, como: top left ou bottom center) e background-repeat (valores possíveis: repeat, repeat-x, repeat-y, no-repeat). Exemplo: ELFS,

21 aula03_12.htm <html> <head><title>textura de Fundo</title> <style type="text/css"> body {background-image:url(pantera.gif); background-position:bottom center; background-repeat:repeat-x} </style> </head> <body> <h1>textura de Fundo</h1> <p> A aplicação de uma textura a um documento requer a definição de uma imagem que deve ser utilizada como fundo do documento. Se a imagem não ocupar a totalidade da página ela poderá ser repetida quantas vezes forem necessárias para ocupar toda a página. </p> </body> </html>! Exercício: Testar outras combinações de valores para as propriedades background-position e background-repeat. ELFS,

22 ! Bordas e Margens. A figura a seguir mostra como são entendidos os conceitos de borda e margem em relação a um elemento qualquer de um documento XHTML. margem borda conteúdo! Para a margem, os valores: auto, um-tamanho, uma-porcentagem devem ser atribuídos às propriedades: margin-top, margin-right, margin-bottom, margin-left ou margin.! A borda é estabelecida pela propriedade border, que pode assumir um dos seguintes valores: solid, dotted, dashed, double, groove, ridge, inset, outset. Para a espessura da borda, os valores: thin, medium, thick e um-tamanho devem ser atribuídos às propriedades: border-topwidth, border-right-width, border-bottom-width, border-leftwidth ou border-width. ELFS,

23 ! Exercício: Estabelecer um estilo conveniente para o elemento img de modo a obter o efeito mostrado na página abaixo. aula03_13.htm ELFS,

24 ! As propriedades margin-top e margin-bottom podem ser usadas também para definir o espaçamento acima e abaixo de títulos em um documento XHTML. Por exemplo: <style type= text/css > body {margin-left:10%; margin-right:10%} h1 {margin-top:20%; margin-bottom:5%} </style>! É possível também a definição de classes para a definição de estilos. Por exemplo: <style type= text/css > h2.secao {margin-top:3em; margin-bottom:2em} </style>... <h2 class= secao >Título da seção</h2> Medidas relativas Medidas absolutas em altura da fonte do elemento in polegadas ex altura da letra x cm centímetros px pixels mm milímetros % porcentagem pt pontos (1 ponto = 1/72 polegadas) ELFS,

25 ! Indentação de Parágrafos. A propriedade text-indent é usada para estabelecer um recuo na primeira linha de um parágrafo ( indentação ). Por exemplo: <style type="text/css"> p {text-indent: 15%} </style>! Controle de Fontes de Caracteres. As propriedades de folhas de estilo também devem ser usadas para controlar como os caracteres serão apresentados em um documento XHTML. As seguintes propriedades estão disponíveis: " font-size: normalmente definido em pt ou %, mas pode ser expresso com os valores: small, large, normal. " font-style: valores possíveis: italic, oblique ou normal. " font-weight: número de 100 a 900 (nível de negrito) ou os valores: bold, light e normal. " text-transform: upercase ou lowercase. " line-height: espaçamento entre linhas; pode assumir os seguintes valores: número de vezes o espaçamento normal, valor em porcentagem do espaçamento normal, valor em pt, ou normal. ELFS,

26 " font-family: define os nomes das fontes a serem usadas; pode definir vários nomes alternativos (será usada a primeira disponível no computador). Exemplo: <style type="text/css"> p {font-family:georgia, Times New Roman, Garamond, Vivaldi, Arial} </style> Definição de Estilos Próprios! Através do atributo class é possível definir estilos personalizados, como ocorre em processadores de texto usuais. Exemplo: ELFS,

27 <html> <head> <title>textura de Fundo</title> <style type="text/css"> h1.especial { font-size:18pt; font-family:arial; color:blue; text-align:center; } aula03_14.htm p.cor { text-indent: 15%; background:yellow; margin-left:5%; font-size:normal; } p.normal { font-weight:bold; font-size:normal; color:black; margin-left:20%; } ELFS,

28 p.pequeno { font-size:small; margin-left:30%; } </style> </head> <body> <h1 class="especial">a Pantera Cor-de-Rosa</h1> <p class="cor">no filme "A Pantera Cor-de-Rosa", Peter Sellers interpreta o atrapalhado Inspetor Clouseau.</p> <p class="pequeno">clouseau precisa encontrar um ladrão de jóias que está mais perto do que ele imagina: o perigoso assaltante é amante de sua esposa.</p> <p class="normal">o filme, dirigido por Blake Edwards, contou também com David Niven e Robert Wagner no elenco.</p> </body> </html> Exercício. Definir uma folha de estilo externa de modo que todas as características de apresentação da página a seguir estejam definidas nesta folha de estilo. Se necessário, defina classes para as diversas apresentações de um mesmo elemento. ELFS,

29 aula03_15.htm ELFS,

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

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

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

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

Tecnologias para Web Design

Tecnologias para Web Design Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente

Leia mais

HTML - 7. Vitor Vaz da Silva Paula Graça

HTML - 7. Vitor Vaz da Silva Paula Graça HTML - 7 Vitor Vaz da Silva Paula Graça 1 Formulários Os formulários forms no HTML, são utilizados para a introdução de dados de uma determinada aplicação Os programas JavaScript têm como um dos seus maiores

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

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

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

Introdução às Folhas de Estilo

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

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web Introdução Formulários rios & Conteúdo Dinâmico Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA A Web surgiu inicialmente como uma nova forma de comunicação de informações, fazendo uso de

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

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

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

Leia mais

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

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

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

COMO FUNCIONA UM FORMULÁRIO

COMO FUNCIONA UM FORMULÁRIO FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,

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

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

CSS (Style Sheets - Folhas de Estilo)

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

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir HTML - Formulários @wre2008 1 Sumário Formulários HTML @wre2008 2 Formulários: Muitos elementos de um formulário html são definidos pela tag . Cada tipo de elemento

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

O código acima descreve o formulário com uma caixa de texto e dois botões

O código acima descreve o formulário com uma caixa de texto e dois botões Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades

Leia mais

7. Cascading Style Sheets (CSS)

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

Leia mais

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,

Leia mais

CSS Luciano Otávio de Assis CSS

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

Leia mais

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

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: 48 10. CSS 10.1 O que é CSS? CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS

Leia mais

CSS - Cascading Style Sheets

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

Leia mais

Formulário (Send & Recieve) Prof. Celso H. Masotti

Formulário (Send & Recieve) Prof. Celso H. Masotti Formulário (Send & Recieve) Prof. Celso H. Masotti O Send e o Recieve A partir desse momento os exercícios serão realizados com dois arquivos, um de envio de dados (send) e o que recebe esse dados (recieve)

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

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

Aula 5 Cabeçalhos, Imagens e Links

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

Leia mais

Web Design Aula 09: Formulários

Web Design Aula 09: Formulários Web Design Aula 09: Formulários Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Tag ... Tag Tag ... Rádio Checkbox Atributo name Form Um

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

Apostila de Introdução ao CSS

Apostila de Introdução ao CSS Universidade Federal Fluminense Centro Tecnológico Escola de Engenharia Curso de Engenharia de Telecomunicações Programa de Educação Tutorial Grupo PET-Tele Apostila de Introdução ao CSS Autor atual: Isabelle

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

Ferramentas Programáveis. Profº Ritielle Souza

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

Leia mais

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) Formulários (FORMS): Um formulário é uma área que pode conter elementos de formulário. Elementos de formulário são elementos que permitem ao usuário

Leia mais

Programando em PHP. Conceitos Básicos

Programando em PHP. Conceitos Básicos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

Leia mais

Web Design. Prof. Felippe

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

Leia mais

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

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Linguagem de Programação IV -PHP Aula 06 Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Criação de Formulários o Um formulário consiste em uma série de campos que são preenchidos pelo usuário

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

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...

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

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. Formulários Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. O formulário depende de outros programas no servidor, para receber e

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

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

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

Leia mais

Introdução à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

Leia mais

Curso de HTML. Rone Ilídio

Curso de HTML. Rone Ilídio Curso de HTML Rone Ilídio HTML HyperText Mark-up Language Linguagem criação de páginas Apresenta informações Formada por tags, exemplo: Tag H1: dados marcados com h1 Interessante: Acesse qualquer

Leia mais

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

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

Leia mais

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

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

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar formulários em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

Cascading Style Sheets

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

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

TECNOLOGIAS WEB AULA 7

TECNOLOGIAS WEB AULA 7 TECNOLOGIAS WEB AULA 7 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de formulários em HTML. Compreender as principais estruturas formadas com as

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,

Leia mais

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

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

Leia mais

Exemplo de uso correto da semântica HTML

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

Leia mais

Programação WEB II. Formulários Em PHP. Métodos GET e POST progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza

Programação WEB II. Formulários Em PHP. Métodos GET e POST progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza Formulários Em PHP Métodos GET e POST progweb2@thiagomiranda.net Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Entender o funcionamento

Leia mais

CSS -Cascading Style Sheets - Introdução

CSS -Cascading Style Sheets - Introdução CSS -Cascading Style Sheets - Introdução Como surgiu a tecnologia CSS? De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução

Leia mais

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1 Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-2 Sumário Behaviors

Leia mais

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

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

Leia mais

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web Parte III - Hypertext

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

HTML & CSS. Informática / LECA. Marco Costa. Departamento de Ciência de Computadores Faculdade de Ciências, Universidade do Porto 2005 / 06

HTML & CSS. Informática / LECA. Marco Costa. Departamento de Ciência de Computadores Faculdade de Ciências, Universidade do Porto 2005 / 06 HTML & CSS Informática / LECA Marco Costa Departamento de Ciência de Computadores Faculdade de Ciências, Universidade do Porto 2005 / 06 Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 1 / 157 Conteúdo Conteúdo

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

Roteiro 2: Conceitos de Tags HTML

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

Leia mais

Formulários em HTML - O que são e para que servem

Formulários em HTML - O que são e para que servem Formulários em HTML - O que são e para que servem A tag - Os atributos action e method A primeira coisa que iremos fazer é usar a tag para podermos usarmos formulários. Antes de entrarmos

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

7. Formulários em XHTML

7. Formulários em XHTML Programação para Internet I 7. Formulários em XHTML Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt Os formulários constituem uma das principais formas de interacção entre clientes e servidores. São

Leia mais

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento. IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários

Leia mais

3 HTML Tabelas, frames e formulário

3 HTML Tabelas, frames e formulário 3 HTML Tabelas, frames e formulário Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Tabelas...3 Principais atributos das tabelas...4 Principais atributos

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

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

Leia mais

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

Formulários HTML e Introdução à Programação Web

Formulários HTML e Introdução à Programação Web Formulários Até agora tivemos uma boa visão da parte gráfica e de hipertexto do HTML. Agora vamos ver como o HTML pode ser usado para fazer parte efetiva em um programa. Dissemos que HTML não é uma linguagem

Leia mais

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets Datamec S.A. Sumário Capítulo 1:... 3 Aplicando Style Sheets... 3 Objetivo...4 Entendendo Style Sheets...5 Anexando Style Sheets em documentos HTML...6 Através de links... 6

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

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

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Formulários e JavaScript Como visto anteriormente, JavaScript pode ser usada para

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

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

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

Leia mais

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

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

Leia mais

Scriptlets e Formulários

Scriptlets e Formulários 2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,

Leia mais

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique. Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças

Leia mais

Web Design Aula 13: Introdução a CSS

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

Leia mais

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

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

Leia mais

BIBLIOGRAFIA:... 36. CSS pode ser adicionado com uso do atributo style. Por exemplo, você pode definir o tipo e o tamanho da fonte em um parágrafo:

BIBLIOGRAFIA:... 36. CSS pode ser adicionado com uso do atributo style. Por exemplo, você pode definir o tipo e o tamanho da fonte em um parágrafo: Css Página 1 CSS Sumário Introdução ao CSS... 4 O que mais posso fazer com CSS?... 6 Como funciona as CSS... 7 Método 1: In-line (o atributo style)... 8 Método 2: Interno (a tag style)... 8 Método 3: Externo

Leia mais

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

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

Leia mais

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

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB Gabarito AD1 2 semestre de 2014. Observações importantes:

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir Linguagem HTML Listas e Formulários @wre2008 1 Sumário Listas Revisão da tag Criação de formulários HTML @wre2008 2 Listas As listas são utilizadas para citar, numerar

Leia mais