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 ( 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= mailto:elfsenne@feg.unesp.br 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 action="mailto:elfsenne@feg.unesp.br" 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 action="mailto:elfsenne@feg.unesp.br" 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,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DWEB. Design para Web. HTML5 - Marcação de formulário. Curso Superior de Tecnologia em Design Gráfico

DWEB. Design para Web. HTML5 - Marcação de formulário. Curso Superior de Tecnologia em Design Gráfico DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico HTML5 - Marcação de formulário E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis

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

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

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

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

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

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

Compêndio códigos. <html>

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

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

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

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

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

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

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

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

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

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Conceitos de HTML Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Definição de HTML Linguagem de marcadores (tags).

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 utilizar estilos em HTML com CSS Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

indica o nome do campo pelo qual podemos acessar.

indica o nome do campo pelo qual podemos acessar. Formulários Em geral Com o Javascript, os formulários Html tomam outra dimensão. Não esqueça que em Javascript, podemos acessar cada elemento de um formulário para, por exemplo, ler ou escrever um valor,

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

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos

Leia 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

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

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

Leia mais

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

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

Cabeçalho do documento

Cabeçalho do documento Cabeçalho do documento O cabeçalho de uma página HTML fica dentro das Tags e , e dentro dessas Tags podemos usar Tags , , , , e etc. A Tag TITLE Por exemplo

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

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

Formulários HTML. Envio de Informação para o servidor

Formulários HTML. Envio de Informação para o servidor Programação Na Web Formulários HTML Envio de Informação para o servidor 1 António Gonçalves Agenda Envio de dados através de formulários A Marca FORM Controle para Text Botões tipo Push Botões Check boxes

Leia mais

TABLELESS E PROJETO ESTRUTURAL

TABLELESS E PROJETO ESTRUTURAL Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se

Leia 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

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

Sistemas para internet e software livre

Sistemas para internet e software livre Sistemas para internet e software livre Metodologia de modelagem de aplicações WEB Image: FreeDigitalPhotos.net Domínio: Elementos de aplicação WEB Páginas Web Scripts Formulários Applets e ActiveX Motivação

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

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 Formulários Durante a navegação em websites é comum que sejam solicitadas informações

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia 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

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

Manual de Gerenciamento de Conteúdo

Manual de Gerenciamento de Conteúdo Manual de Gerenciamento de Conteúdo 1 Sumário 1) O que é um Gerenciador de Conteúdo...3 2) Como o Site está Estruturado...3 3) Como Gerenciar o Conteúdo do Site...5 3.1) Adicionar Itens no Menu de Navegação...6

Leia mais

Tecnologias para Web Design

Tecnologias para Web Design Tecnologias para Javascript e DOM Introdução à Scripts Um script do lado cliente é um programa que acompanha um documento HTML Pode estar incluído no próprio documento embutido ou acompanha-lo num arquivo

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 / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.). HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a

Leia mais

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...

Leia mais