Desenvolvimento de Aplicações WEB 1 HTML
|
|
- Vera Beltrão Farinha
- 8 Há anos
- Visualizações:
Transcrição
1 Desenvolvimento de Aplicações WEB 1 HTML INTRODUÇÃO Nesta primeira parte da apostila falaremos sobre a linguagem HTML. Podemos dizer que o HTML é a linguagem mãe. É importante aprendermos o HTML, para poder trabalhar com outras linguagens. O HTML é responsável pela parte pesada do site. Hoje, existe o XHTML, que veio para substituir o HTML.Você deve se perguntar, por que então eu vou aprender HTML em vez de aprender logo XHTML? É importante que você aprenda o básico primeiro, a linguagem XHTML não é tão diferente do HTML, mas é melhor que você conheça o HTML primeiro que tudo vai ficar mais fácil depois para aprender o XHTML, que é praticamente o HTML modificado, com maneiras diferentes de fechar as tags etc. Então, aprenda primeiro pelo HTML e depois faça a comparação e veja as diferenças. Será muito mais fácil entender o XHTML depois de ter visto o HTML. Dois termos importantes: - Client Side: É uma expressão em inglês que traduzida significa Lado Cliente. O Client side é usado para designar uma aplicação (site, software, plugin, etc) que é executada no computador do usuário e não no servidor que hospeda a aplicação. Exemplos de algumas tecnologias que são executadas no cliente: HTML; CSS; Javascript; Flash; ActiveX. - Server Side: É uma expressão em inglês que traduzida significa Lado Servidor. O Server Side é usado para designar que uma aplicação roda no servidor e não no computador do usuário. Exemplos de aplicações que são executadas no servidor: Bancos de dados: SQL Server, MySQL, Oracle, etc; ASP / ASP.NET; PHP; JSP; 1
2 1 HTML HTML não é uma linguagem de programação e sim uma linguagem de marcação de textos (Hyper Text Markup Language) que é usada na construção de página para a web. A estrutura do HTML é baseada em tags (marcações). O que são tags em HTML? Tags são marcações e são usadas para trabalhar com os diversos conteúdos, como textos, imagens, links, entre outros. <p>a tag p é usada para criar parágrafos de textos </p> <img src= foto.jpg /> <a href = > Colégio Técnico Opção </a> Nos exemplos acima usamos a tag <p> </p> para criar um parágrafo, <img> para inserir uma imagem e <a> </a> para criar um link. HTML é uma linguagem de programação? Não. HTML não é uma linguagem de programação e sim uma linguagem de marcação de textos. Qual a diferença entre HTML e XHTML? O XHTML é uma nova versão do HTML, ele é resultado da mistura entre HTML e XML. Basicamente ele contém as tags do HTML e as regras do XML. Quais os pré-requisitos para aprender HTML? Basta ter navegado na internet e ter usado algum editor de texto. Para um conhecimento mais aprofundado seria interessante conhecer um pouco de conjunto de caracteres, padrões de internet e funcionamento dos navegadores. Quais são os melhores editores para HTML? Dreamweaver, Expression web e Visual Web Developer para quem gosta de usar um ambiente visual. Bloco de notas e editores de texto puro para aqueles que gostam de trabalhar com código puro. Todos os sites usam HTML? Sim. O HTML é base para qualquer site. Posso criar um site usando apenas HTML? Pode, mas não deve. O HTML é responsável pela estruturação da página, isto é, as tags e o conteúdo. O aspecto visual da página é feito em CSS, logo se você usar apenas HTML seu site funcionará, mas ficará com um layout não muito agradável e não estará seguindo as regras atuais de desenvolvimento de sites. Quais as versões do HTML? Existem diversas versões do HTML. Atualmente as mais usadas são a 4.01 e o XHTML 1.0. Quem padroniza e controla as versões do HTML? É um órgão chamado W3C ( Este órgão é formado por algumas universidades (MIT nos EUA, ERCIM na França e Keio no Japão) e empresas privadas, sendo a maioria delas de tecnologia. O que o HTML tem a ver com os navegadores? Tudo. O HTML é executado no navegador. Quando você acessa um site qualquer é o seu navegador que vai buscar o HTML para exibi-lo. Alguns recursos podem não funcionar corretamente em determinados navegadores. 1.1 Estrutura básica de um documento HTML 2
3 Todo o documento HTML fica contido entre as TAGS: <HTML> e </HTML> e duas seções básicas: HEAD: Contém parâmetros de configuração do documento. BODY: Contém o documento em si. Exemplo <html> é a tag de abertura do html. <head> cabeçalho da página. contém informações adicionais. <title> é a tag de abertura do título da janela. </title> tag de fechamento do título da janela. </head> tag de fechamento do cabeçalho. corpo da página. aqui ficará a parte principal do seu site. tag de fechamento do corpo da página. </html> tag de fechamento do html Informações adicionais contidas no cabeçalho: Head As META TAGS são usadas para colocar informações adicionais em páginas WEB para uso por parte dos indexadores de paginas (Ex: Google, Yahoo, Altavista, etc). Estas informações podem ser sobre o autor, o conteúdo, ou como indexar e seguir os links. As META TAGS devem ser colocadas no cabeçalho entre o <HEAD> e o </HEAD>. <html> <head> <meta name="robots" content="follow,index"> <meta name="description" content="esta pagina é um exemplo de Site."> <title> Minha Página </title> </head> </html> Aqui vamos dar alguns exemplos de META TAGS para uso na criação de páginas. Substitua os textos entre aspas, após a palavra CONTENT, conforme o caso. INDEXAÇÃO: <meta name="robots" content="[no]index, [NO]FOLLOW"> A intenção desta tag é informar ao robô de indexação se a página pode ou não ser indexada e se pode ou não seguir os links nela contidas. DESCRIÇÃO: <meta name="description" content="bob's personal page"> A intenção desta tag é para que o serviço de indexação possa fornecer ao solicitante uma breve descrição da pagina (ao invés das primeiras linhas da página). AUTOR: <meta name="author" content="robert Rice Brandt"> Indicação do autor da página. PALAVRAS CHAVE: <meta name="keywords" content="professor, Engenharia Eletrica"> Indicação de palavras chave da página. NÃO FAZER CACHE: <meta http-equiv="pragma" content="no-cache"> Indicação de não colocar no cache do browser, ou seja sempre vai buscar nova página. 3
4 FAZER REFRESH AUTOMATICO: <meta http-equiv="refresh" content="10"> Indicação para fazer refresh da pagina a cada 10 segundos. FAZER REDIRECIONAMENTO AUTOMATICO: <meta http-equiv="refresh" content="3;url= Indicação para ficar 3 segundos na pagina atual, depois redirecionar para a pagina indicada Informações adicionais contidas no cabeçalho: Body Cores e padrões de Fundo Algumas propriedades da TAG <Body> </Body> bgcolor=" #FFFFFF Define a cor de fundo da página HTML (fundo branco); background="fundo.jpg" Define uma figura como fundo da página HTML; text="#cc0000" Define a cor do texto que aparecerá na página HTML (letras vermelho); link="#0033cc" Define a cor dos links (azul); vlink="#ffff00" Define a cor dos links já visitados pelo usuário (amarelo); alink="#00cc00" Define a cor dos links ativos (verde); marginwidth="2" Define a largura da margem da página; marginheight="2" Define a altura da margem da página; leftmargin="2" - Define a distância da margem esquerda da página; rightmargin="2" - Define a distância da margem direita da página; topmargin="2" - Define a distância da margem superior da página; bottommargin="2" - Define a distância da margem inferior da página; <body bgcolor="#ffffff" text="#cc0000" link="#0033cc" vlink="#ffff00" alink="#00cc00" background="fundo.jpg" marginwidth="2" marginheight="2" leftmargin="1" topmargin="2" rightmargin="3" bottommargin="4"> 1.2 Parágrafos e Quebras de Linha Tag <P> 4
5 Para forçar o inicio de um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto na segunda linha após o final do parágrafo anterior. O Browser vai sempre avançar uma linha em branco, posicionando-se na segunda linha seguinte ao comando. Pode aparecer individualmente <P> ou em par <P> </P>. <p> Aqui vai a primeira linha </p> <p> Aqui vai a segunda linha </p> <p> Esta linha utiliza apenas a tag individualmente. <p> E aqui mais uma linha de parágrafo. A Tag <P> pode utilizar os parâmetros de alinhamento (Align) que pode receber os seguintes valores. Left : Alinhamento à esquerda; Right: Alinhamento à direita; Center: Centralizado; Justify : Texto justificado. <p align= center > Aqui vai a primeira linha centralizada!</p> <p align= right > Aqui vai a segunda linha alinhada à direita</p> Tag <BR> O comando <BR> tem como função avançar (quebrar) para a linha imediatamente após aquela em que se encontra, sem contudo deixar uma linha em branco adicional <HTML> <head> <title> Exemplo com BR </title> </head> Aqui está o meu texto na primeira linha <BR> E aqui o meu texto na segunda linha. <BR> Aqui o texto na terceira linha, sem deixar uma linha adicional em branco. </HTML> Tag <HR> O comando <HR> tem a função de inserir uma linha divisória na posição que foi especificado. Serve p/ separar assuntos ou tópicos distintos. <HTML> <head> <title> Exemplo com HR </title> </head> Texto mostrado na primeira linha <HR> Texto mostrado na Segunda linha. </HTML> Aplicando Estilos de Texto 5
6 Você pode criar uma série de efeitos no texto, alterando a forma ou o tipo de fonte. Todos os comandos que alteram o estilo do texto são do tipo liga-desliga, ou seja, precisam ser especificados em pares, marcando o inicio e fim do texto que sofrerá a formatação. As principais tags: Negrito: <b> Texto </b> Itálico: <i> Texto </i> Sublinhado: <u> Texto </u> Strong (similar ao negrito): <Strong> texto </Strong> Pulsante: <blink> Texto </blink> TYPERWRITER <tt>texto</tt> Deixa o texto com espaçamento regular BIG <big>texto</big> Aumenta a fonte e aplica negrito SMALL <small>texto</small> Reduz e altera a fonte SOBRESCRITO <sup>texto>/sup> Eleva o texto e diminui seu corpo SUBESCRITO <sub>texto</sub> Rebaixa o texto e diminui seu corpo Exemplo <HTML> <head> <title> Exemplo aplicando estilos de Textos </title> </head> <b> Aqui está o meu texto na primeira linha em negrito </b><br> <i> E aqui o meu texto na segunda linha em itálico. </i> <BR> <u> Aqui o texto sublinhado na terceira linha, sem deixar uma linha adicional em branco.</u> <hr> <b><i>e agora? Negrito e Sublinhado!</i></b> </HTML> Cabeçalhos Outra forma muito usada para mudar o tamanho da letra e aplicar um efeito como negrito em um texto é o uso dos comandos <H>. O HTML possui seis comandos, de <H1> até <H6>, que aplicam um tamanho de fonte diferenciado para o texto que envolver. Exemplo : <H1> Texto </H1> maior <H2> Texto </H2> <H3> Texto </H3> <H4> Texto </H4> <H5> Texto </H5> <H6> Texto </H6> menor A Tag <H> pode utilizar os parâmetros de alinhamento (Align) que pode receber os seguintes valores. Left : Alinhamento à esquerda; Right: Alinhamento à direita; Center: Centralizado; Justify : Texto justificado. Exemplo 6
7 <HTML> <head> <title> Exemplo aplicando estilos de Textos </title> </head> </HTML> <h1> Aqui... Cabeçalho H1 </h1> <h2> E aqui o meu cabeçalho H2 </h2> Exibição de Textos Pré-formatados Através do comando <PRE> </PRE> você pode incluir um texto que foi editado por outro editor de texto e preservar sua formatação original, como as marcas de tabulação, fim de linha gerado pela tecla Enter e etc. <PRE> Texto da linha 1 Texto da linha 2... Texto na linha 3 </PRE> Alinhamento do conteúdo Como padrão, os textos inseridos são alinhados pela margem esquerda. Para centralizar um cabeçalho, parágrafo, imagem, tabela e etc, deve ser usado o comando <CENTER> </CENTER>. <center> O texto daqui vai aparecer centralizado na tela </center> <left> O texto daqui vai aparecer alinhado à esquerda da tela </left> <right> O texto daqui vai aparecer alinhado à direita da tela </ right > Alinhando o Texto com o comando <DIV> Introduzido na versão 3 da linguagem HTML, o comando <DIV> </DIV> envolve uma área do texto oi DIVsão que pode receber parâmetros específicos de alinhamento, como é o caso de ALIGN, para alinhar o texto. <DIV ALIGN= center > </DIV> - conteúdo centralizado <DIV ALIGN= left > </DIV> - conteúdo alinhado à esquerda <DIV ALIGN= right > </DIV> - conteúdo alinhado à direita <DIV ALIGN= justify > </DIV> - conteúdo justificado 7
8 <DIV align= center > <H1> Texto utiliando a TAG DIV </H1> Todo o texto dentro destas TAGS aparecerá centralizado! </DIV> Tamanho da fonte, cor e tipo <FONT> </FONT> permite alterar as propriedades de tamanho, cor e tipo de fonte do texto exibido. <font size= n face= Nome_da_fonte color= Cor_da_fonte > Texto </font> Parâmetros: Size - especifica o tamano da Fonte Face - especifica o nome da fonte. Podem ser especificadas várias fontes, de maneira que se o sistema não possuir a primeira opção, a segunda é carregada e assim por diante. Color especifica a cor do texto, pode ser em hexadecimal ou pelo nome predefinido de cores. <font color= #FF0000 face= Arial,Verdana size= 12 > Todo o texto em vermelho tipo arial e tamanho 12. </font> <font color= #FF0000 face= Verdana size= 12 > Todo o texto em vermelho tipo arial e tamanho 12. </font> <font color= #FF0000 face= Arial,Verdana,Helvetica size= 12 > Todo o texto em vermelho tipo arial e tamanho 12. </font> Imagens Incluir uma imagem em uma página html é uma tarefa bem simples e que requer alguns requisitos básicos. A imagem deve estar disponível nos formatos.gif ou JPG. A tag IMG insere uma imagem no documento. <IMG SRC= foto.jpg > Parâmetros: SRC = URL - é o nome da figura, se estiver no mesmo diretório do programa ou o seu caminho completo (URL). ALT = texto Exibe o texto quando o browser não encontra a imagem ou uma legenda quando o cursor passa sobre ele mostrando o texto especificado. ALIGN = TOP MIDDLE BOTTOM LEFT RIGHT CENTER Define o alinhamento da imagem no documento. BORDER = numero Especifica em pixels a largura da borda da imagem. O remove a borda 8
9 WIDTH = numero ou % Especifica a largura da imagem, independente do seu tamanho físico. HEIGHT= numero ou % Especifica a altura da imagem, independente do seu tamanho físico. Exemplo <HTML> <head> <title> Exemplo com Imgem </title> </head> </HTML> <h1> Insere uma imagem </h1> <img src= foto.jpg border= 0 alt= Texto sobre a Foto > Criando Links Fazer a ligação de um texto com uma página local é uma tarefa bem simples. Você precisa somente especificar o nome completo do arquivo (ou URL) que será chamado, utilizando a TAG <A> </A> de âncora. Principais parâmetros: HREF = URL - especifica o endereço da URL ou arquivo. NAME = String Especifica o nome da seção de um documento que é referida por um link de hipertexto. TARGET = Tipo - A função do atributo target () basicamente é indicar o nome de um frame na página onde um documento deve ser aberto. Outro controle que você pode ter com ele é se o hyperlink deve ser aberto na própria janela ou no próprio frame (target: _self ) onde o próprio link se encontra ou se a URL do link deve ser aberta em outra janela (target= _blank ) do seu browser. <a href="slide.html" target="_self">slide 1.</a> <a href="slide.html" target="_blank">slide 2.</a> <a href="slide2.html" target="meuframe">slide 3.</a> <a href=" target="_blank">meu </a> <a href=" target="_self">google</a> O parâmetro HREF especifica a localização do arquivo. O Texto que fica envolvido pelos dois comandos <A> </A> aparecerá sublinhado e na cor Azul, indicando que é um Link. Exemplo <HTML> <head> <title> Exemplo de link </title> </head> 9
10 </HTML> <h1> Insere um Link </h1> <a href= > Ir para o Site do Google </a> Criando uma Âncora: Para interligar partes de uma página, você precisa criar uma âncora no inicio de casa seção que será referida por um link. Uma âncora é um ponto de referência que será acessado por um link. Uma âncora é usada dentro de um documento para marcar o inicio de uma seção do documento. Essa âncora recebe um nome que será mencionado pelo link que a acessará. <!-- Criei um ponto de referência chamado Ancora_1. --> <A NAME= Ancora_1 > </A> Criando um link para Âncora Para criar um link para uma âncora, você deve usar o comando <A HREF> especificando o nome da âncora que deseja acessar. <A HREF= index.htm#âncora_1 > Clique para acessar o Ponto que possui a Âncora 1 </a> O símbolo # avisa o browser para procurar o link no documento atual. <html> <head> <title> Exemplo de Âncora </title> </head> <p align="center"> Informações sobre a Grécia </p> <hr> <p align="left"> <A HREF="#Geo"> **** Geografia **** </a> <A HREF="#Historia"> **** História **** </a> <A HREF="#Fotos"> **** Fotos **** </a> </p> <hr> <A Name="Geo"></A> <center> <H1>Geografia </H1> </center> <p> Aqui vai o texto contendo informações da geográfica Grega! </p> <hr> <a Name="Historia"></A> 10
11 <center> <H1>História da Grécia</H1> </center> <p> Aqui vai o texto contendo informações da história Grega! </p> <htr> <hr> <A Name="Fotos"></A> <center> <H1>Fotos da Grécia</H1> </center> <p> Aqui vai ser colocado Fotos da Grécia! </p> <hr> </html> Listas Uma outra forma de estruturar um documento HTML é utilizando listas. Existem basicamente 2 tipos de listas. As não ordenadas, que contém uma série de itens sem numerá-los e as listas ordenadas, que atribuem um número para cada elemento da lista. Trabalhar com listas é uma tarefa muito simples e usa-se as TAGS <UL> </UL> para listas não ordenadas e <OL> </OL> para listas ordenadas Tag <UL> Para criar uma lista não ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista não ordenada (Unordered List) é o comando <UL>, que deve envolver o primeiro e o ultimo item da lista. Cada item da lista deve ser precedido do comando <LI> (Line Item). <UL> <LI> Texto do Item um. </LI> <LI> Texto do Item dois. </LI> </UL> Tag <OL> Para criar uma lista ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista ordenada (Ordered List) é o comando <OL>, que deve envolver o primeiro e o último item da lista. Cada item da lista deve ser precedido do comando <LI> (Line Item). <OL> <li> Texto do Item um. </li> <li> Texto do Item dois. </li> </OL> Aninhando listas não ordenadas 11
12 É possível adicionar listas não ordenadas, dentro de listas não ordenadas, criando assim sub-listas. Veja o exemplo. <html> <head> <title>exemplo de Listas Aninhadas</title> </head> <ul> <li>este é o primeiro item da lista principal <li>este é o segundo item da lista principal <ul> <li>este é o primeiro item da SUB-LISTA principal <li>este é o segundo item da SUB-LISTA principal </ul> <li>aqui termina a Lista principal</li> </ul> </html> Você pode combinar também, listas não ordenadas com listas ordenadas e vice-versa. Lista Não Ordenada e uma Sub-Lista Ordenada. <html> <head> <title>exemplo de Listas Aninhadas</title> </head> <ul> <li>este é o primeiro item da lista principal <li>este é o segundo item da lista principal <ol> <li>este é o primeiro item da SUB-LISTA principal <li>este é o segundo item da SUB-LISTA principal </ol> <li>aqui termina a Lista principal</li> </ul> </html> Exemplo2: Lista Ordenada e uma sub-lista Não Ordenada. <html> <head> <title>exemplo de Listas Aninhadas</title> </head> <OL> <li>este é o primeiro item da lista principal <li>este é o segundo item da lista principal <Ul> <li>este é o primeiro item da SUB-LISTA principal <li>este é o segundo item da SUB-LISTA principal </Ul> <li>aqui termina a Lista principal</li> </OL> </html> 12
13 Alterando numeração e marcadores Até agora, vimos como criar listas ordenadas e não ordenadas usando os marcadores e numeração padrão dos comandos <OL> E <UL>. Veremos então como alterar as características básicas das listas, como a numeração e os marcadores. Modificando os marcadores das listas Não Ordenadas. A opção Type= do comando <UL> permite que sejam especificadas variações para o marcador utilizado na lista. Os valores possíveis de se atribuir ao TYPE são: SQUARE : marcador quadrado; CIRCLE: marcador como um círculo sem preenchimento (vazio); DISC: marcador como um círculo com preenchimento. <ul type="circle"> <li>primeiro item da Lista</li> <li>segundo item da Lista</li> <li>terceiro item da Lista</li> </ul> As listas numeradas possibilitam maiores oportunidades de modificações. Seu padrão é sempre iniciar a lista pelo numero 1. Você pode mudar o numero inicial e o tipo de numeração da lista usando o parâmetro TYPE e o parâmetro START. Os valores permitidos para Type são: Type = 1 - Cria uma lista numérica normal (é o padrão e não precisa ser especificado) Type = A - Cria uma lista alfabética com letras maiúsculas começando pelo A. Type = a - Cria uma lista alfabética com letras minúsculas começando pelo a. Type = I - Cria uma lista numérica com números romanos maiúsculas começando pelo I. Type = i - Cria uma lista numérica com números romanos minúsculas começando pelo i. O START permite mudar o número inicial. START = 10 - inicia no numero 10. <OL Type=1 Start=10> <li> Item que começa no numero 10 </li> <li> Item 11 da lista </li> </OL> Tabelas O uso de tabelas melhora muita a aparência de uma página, pois permite o alinhamento de textos e imagens, além de ordenar as informações de uma forma padronizada. Uma tabela é criada pelas TAGS <Table> </Table> e consiste em linhas e colunas. A interseção de uma linha com uma coluna é chamada de célula. As linhas de uma tabela são criadas pelo comando <TR> </TR>. As colunas de uma tabela são criadas pelo comando <TD> </TD>. 13
14 A TAG <Table> possui alguns parâmetros, como por exemplo, para definir a borda, a cor da borda, largura e altura da tabela e etc. Vejamos alguns deles: Border = N - onde N é a largura da borda, e 0 diz que é sem bordas. Align = left center right Define o alinhamento da tabela na página. Bgcolor = Especifica a cor de fundo de toda a tabela. Bordercolor = Especifica a cor da borda de toda a tabela. Width = Especifica a largura da tabela em pixels ou em percentagem relativa à largura da janela. Cellspacing = Especifica o espaçamento em pixels entre as células. Cellpadding = Especifica o espaçamento entre o conteúdo e a borda de célula. <table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#ff0000" bgcolor="#cccccc"> <tr> <td> 1ª linha e 1ª coluna </td> <td> 1ª linha e 2ª coluna </td> </tr> <tr> <td>2ª linha e 1ª coluna </td> <td>2ª linha e 2ª coluna </td> </tr> </table> <TR> Table Row Define uma linha da tabela. Para cada linha em uma tabela, de ser especificado um par destas Tags, onde, dentro delas, devem ser especificados os comandos <TD> </TD> para crias as células de dados daquela linha. As linhas de uma tabela não precisam ter necessariamente o mesmo numero de células. Sintaxe: <TR bgcolor= COR background= Nome da Figura.gif ou.jpg > </TR> <TD> Table Data Define o conteúdo de uma célula da linha de uma tabela. Cada célula de uma linha precisa ser especificada por meio deste comando. Sintaxe: <TD ALIGN = CENTER LEFT RIGHT COLSPAN= ROWSPAN= WIDTH= HEIGHT= > </TD> Parâmetros: ALIGN = LEFT Center Right justify - Especifica o alinhamento horizontal do conteúdo da célula. VALIGN = TOP MIDDLE BOTTOM BASELINE Especifica o alinhamento vertical do conteúdo da célula. COLSPAN = numero Indica o numero de colunas que esta célula deverá ocupar. ROWSPAN= Numero - Indica o numero de linhas que esta célula deverá ocupar. 14
15 WIDTH = numero numero% Especifica a largura da coluna em pixels ou em porcentagem relativa à largura da janela. HEIGHT = numero numero% Especifica a altura da coluna em pixels ou em porcentagem relativa à largura da janela. BGCOLOR = cor Especifica a cor de fundo da célula. Dentro de cada célula você pode colocar qualquer elemento aceito em uma página HTML, como um texto ou figuras. Você pode adicionar tabelas dentro de tabelas (aninhamento), mas fique atento com o fechamento correto das Tags Expandindo uma célula pelas colunas Uma vez definida a estrutura básica de uma tabela, ou seja, o numero de linhas e colunas, podemos apagar a divisão entre células vizinhas de maneira a aumentar a largura ou a altura de uma célula e criar tabelas mais bem definidas. O exemplo abaixo mostra o uso da opção COLSPAN para aumentar o tamanho de uma célula e fazer com que ela ocupe colunas adjacentes. Exemplo de uma tabela contendo 2 linhas e 4 colunas. <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>linha 1 - Coluna 1</td> <td>linha 1 - Coluna 2</td> <td>linha 1 - Coluna 3</td> <td>linha 1 - Coluna 4</td> </tr> <tr> <td>linha 2 - Coluna 1</td> <td>linha 2 - Coluna 2</td> <td>linha 2 - Coluna 3</td> <td>linha 2 - Coluna 4</td> </tr> </table> Agora a mesma tabela com 2 colunas unidas pelo comando COLSPAN. <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align= center >Linha 1 - Coluna e Coluna 2</td> <td>linha 1 - Coluna 3</td> <td>linha 1 - Coluna 4</td> </tr> <tr> <td>linha 2 - Coluna 1</td> <td>linha 2 - Coluna 2</td> <td>linha 2 - Coluna 3</td> <td>linha 2 - Coluna 4</td> </tr> </table> Agora um exemplo com o comando ROWSPAN <table width="100%" border="0" cellspacing="0" cellpadding="0"> 15
16 <tr> <td rowspan="2">linha 1 e Linha 2 - Coluna 1</td> <td>linha 1 - Coluna 2</td> <td>linha 1 - Coluna 3</td> <td>linha 1 - Coluna 4</td> </tr> <tr> <td>linha 2 - Coluna 2</td> <td>linha 2 - Coluna 3</td> <td>linha 2 - Coluna 4</td> </tr> </table> Formulários Um dos recursos mais interessantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário eletrônico o usuário pode interagir com o servidor, enviando dados que serão processados no servidor e posteriormente devolvidos ao cliente. Esses comandos são os principais responsáveis pela viabilização da troca de informações entre o cliente e o servidor. Algumas utilizações de formulários. Uma loja virtual; Um site de busca; Uma agência de empregos, onde os candidatos fazem o cadastro de currículos; Qualquer site que necessite que o usuário entre com alguma informação que será enviada e/ou processada pelo servidor, que pode ou não retornar alguma informação de volta para o cliente Definindo um FORM A tag <FORM> Esta Tag especifica o destino (URL) que receberá os dados do formulário e defini a forma ou método como os dados serão enviados. A tag <Form> usa os seguintes parâmetros: ACTION = URL Especifica o local (URL) do servidor e/ou do Script ou CGI que vai processar os dados do formulário. METHOD = Método Especifica o método usado pelo servidor para receber o form. As opções possíveis para esse parâmetro são GET e POST. O método POST é o mais utilizado e transmite toda a informação do form imediatamente após a URL. Porém, separado de sua especificação, ou seja, uma vez que o servidor recebeu uma requisição de um formulário usando o método POST, ele continua a receber os demais dados. O método GET faz com que o conteúdo do formulário seja anexado ao endereço da URL. Exemplos: Usando o metodo POST, mais recomendado. <form method= POST action= ou usando o método GET 16
17 <form method= GET action= Definindo os Campos de um formulário A tag <INPUT> define um campo de entrada de dados onde o usuário digita as informações do formulário. Cada campo de um formulário atribui o seu conteúdo para uma variável que possui nome e tipo especifico. Muitos elementos de um formulário html são definidos pela tag <input>. Cada tipo de elemento possui parâmetros próprios, mas todos possuem pelo menos dois parâmetros em comum: type, que define o tipo de elemento, e name, que como já foi dito define o nome daquele elemento Campo de Texto O campo mais comum em formulários. Exibe na tela um campo para entrada de texto com apenas uma linha. Parâmetros: Value - o valor pré-definido do elemento, que aparecerá quando a página for carregada; Size - O tamanho do elemento na tela, em caracteres; Maxlength - O tamanho máximo do texto contido no elemento, em caracteres; Exemplo <input type="text" name="valor_1" value="" size="" maxlength=""> Campo para Senha - campo de texto com máscara Campo semelhante ao anterior, com a diferença que neste caso os dados digitados são substituídos por asteriscos, e por isso são os mais recomendados para campos que devam conter senhas. É importante salientar que nenhuma criptografia é utilizada. Apenas não aparece na tela o que está sendo digitado. Parâmetros: Value - o valor pré-definido do elemento, que aparecerá quando a página for carregada; Size - O tamanho do elemento na tela, em caracteres; Maxlength - O tamanho máximo do texto contido no elemento, em caracteres; <input type="password" name="senha" value="" size="8" maxlength="8"> Checkbox Utilizado para campos de múltipla escolha, onde o usuário pode marcar mais de uma opção. Parâmetros: 17
18 Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcado Checked - O estado inicial do elemento. Quando presente, o elemento já aparece marcado; <input type="checkbox" name="nome_checkbox" value="valor" checked> Radio Button Utilizado para campos de múltipla escolha, onde o usuário pode marcar apenas uma opção. Para agrupar vários elementos deste tipo, fazendo com que eles sejam exclusivos, basta atribuir o mesmo nome a todos elementos do grupo. Parâmetros: Value - o valor que será enviado ao servidor quando o formulário for submetido, no caso do campo estar marcado Checked - O estado inicial do elemento. Quando presente, o elemento já aparece marcado; <input type="radio" name="sexo" value="m" checked> Masculino <input type="radio" name="sexo" value="f"> Feminino Submit Button Utilizado para enviar os dados do formulário para o script descrito na seção "action" da definição do formulário Parâmetros: Name nome do botão. Value - o texto que aparecerá no corpo do botão. <input type="submit" name="botao1" value="enviar Dados"> Reset Button Utilizado para fazer todos os campos do formulário retornem ao valor original, quando a página foi carregada. Bastante utilizado como botão "limpar", mas na realidade só limpa os campos se todos eles têm como valor uma string vazia. Parâmetros: 18
19 Name nome do botão. Value - o texto que aparecerá no corpo do botão. Exemplo <input type="reset" name="botao2" value="limpar"> Button Utilizado normalmente para ativar funções de scripts client-side (JavaScript, por exemplo). Sem essa utilização, não produz efeito algum. Parâmetros: Name nome do botão. Value - o texto que aparecerá no corpo do botão. <input type="button" name="" value=""> TextArea Exibe na tela uma caixa de texto, com o tamanho definido pelos parâmetros "cols" e "rows". Parâmetros: Cols - número de colunas do campo, em caracteres; Rows - número de linhas do campo, em caracteres; Wrap - Maneira como são tratadas as quebras de linha automáticas. O valor soft faz com que o texto "quebre" somente na tela, sendo enviado para o servidor o texto da maneira como foi digitado; O valor "hard" faz com que seja enviado para o servidor da maneira como o texto aparece na tela, com todas as quebras de linhas inseridas automaticamente; o valor "off" faz com que o texto não quebre na tela e nem quando enviado ao servidor. Value - O elemento do tipo textarea não possui o parâmetro "value". O valor pré-definido do campo é o texto que fica entre as tags <textarea> e </textarea>. <textarea cols="" rows="" name="" wrap="">texto</textarea> Select Se o parâmetro "size" tiver o valor 1 e não houver o parâmetro "multiple", exibe na tela uma "combo box". Caso contrário, exibe na tela uma "select list". 19
20 Parâmetros: Size - número de linhas exibidas. Default: 1; Multiple - parâmetro que, se presente, permite que sejam selecionadas duas ou mais linhas, através das teclas Control ou Shift; option - Cada item do tipo "option" acrescenta uma linha ao select; value - Valor a ser enviado ao servidor se aquele elemento for selecionado. Default: o texto do item; text - valor a ser exibido para aquele item. Não é definido por um parâmetro, mas pelo texto que fica entre as tags <option> e </option> <select name="sexo" size="1" > <option value="m">masculino </option> <option value="f">feminino </option> </select> Upload de arquivos Exibe na tela do browser um campo de texto e um botão, que ao clicado abre uma janela para localizar um arquivo no disco. Para utilizar este tipo de componente, o formulário deverá utilizar o método "POST" e ter o parâmetro "enctype" com o valor "multipart/form-data". Parâmetros: Size - O tamanho do campo de texto exibido. <input type="file" name="" size=""> Hidden Essa TAG serve para colocar informações escondidas do usuário (isto é: o usuário não vê tais TAGs). São utilizadas para diversas funções num FORM, tais como colocar um valor fixo que deseja enviar junto com as demais informações que o usuário preencher no formulário. Exemplo <INPUT TYPE="hidden" NAME="subject" VALUE="MEU PRIMEIRO FORM"> Exemplo completo com todas as tags de formulário <html> <head> <title>exemplo de formulário</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <form name="formulario" method="post" action="./recebe_dados.php"> Exemplos de Objetos de Formulario: 20
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 mais1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão
1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena
Leia maisFerramentas 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 maisINTRODUÇÃ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 maisProgramaçã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 maisPROGRAMAÇÃ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 maisProgramaçã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 maisMini-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 maisRoteiro 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 maisOs 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 maismkdir /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 maisIntroduçã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 maisCOMO 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 maisPÓ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 maisWebdesign 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 maisDesenvolvimento 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 maisDesenvolvimento 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 maisDesenvolvedor 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 maisIntroduçã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 maisTECNOLOGIAS 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 mais0,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 maisQUEM 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 maisIntrodução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
Leia maisO 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 maisIntrodução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;
Leia maisHTML. Conceitos básicos de formatação de páginas WEB
HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto
Leia mais> Herbet Ferreira Rodrigues > contato@herbetferreira.com
Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação
Leia maisCurso PHP Básico. Jairo Charnoski do Nascimento
Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores
Leia maisAula 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 maisProgramaçã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 maisPassa 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 maisProgramação para Internet I
Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:
Leia maisINSTITUTO 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 maisWeb 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 maisSIMULADOS & 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 maisHTML -- 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 maisCurso 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 maisWeb 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 maisConteú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 maisClaudio Damasceno. Avançar
Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA
Leia maisFORMULÁ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 maisTécnicas e processos de produção. Profº Ritielle Souza
Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o
Leia mais4. Características Gerais das Tabelas do HTML
4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag
Leia maisDESENVOLVIMENTO 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 maisLINGUAGEM 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 maisFormulá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 maisHTML (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 mais6.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 maisLinguagem 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 maisScriptlets 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 maisHTML 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 maisInstrução de Trabalho Base de Conhecimento
Aprovado por Comitê da Qualidade Analisado criticamente por Dono do processo 1. OBJETIVOS Esta instrução de trabalho tem como objetivo orientar os colaboradores da SINFO, de como a será mantida e acessada.
Leia maisOPERAÇÃO DE SOFTWARE E APLICATIVOS
OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6
Leia maisFormulá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 maisHTML / 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 mais4.14 - Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img
4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
Leia maisWEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre
Leia maisProfº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 1
Profº Klassen Etec Parque Belém Informática para Internet - DDW I Informática - PI Página 1 1. O QUE É A LINGUAGEM HTML? HTML é a sigla para HyperText Markup Language que traduzido significa Linguagem
Leia maisQuem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;
Leia maisDesenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas
Leia maisIntrodução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira
Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam
Leia maisFormulá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 maisWeb Design Aula 01. No Caderno Responda as Questões abaixo
Aula 01 1 O que é Web Design? 2 Qual a diferença entre Web Design e Web Designer? 3 O que são Sites ou Páginas? Cite 3 tipos de Sites. 4 O que é um Navegador? 5 O que são Servidores e o que são Protocolos?
Leia maisComo incluir artigos:
Como incluir artigos: O WordPress é uma ferramenta muito flexível, com muitas variações e ajustes que podem torná-lo algo muito simples e também muito sofisticado conforme os recursos que são configurados
Leia maisIntrodução ao HTML Hypertext Markup Language
Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do
Leia maisWebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira
WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo
Leia maisTutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados
Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do
Leia maisProgramação e Designer para WEB
Programação e Designer para WEB html Prof. Rodrigo Rocha prof.rodrigorocha@yahoo.com http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem. Ambientes para programação
Leia maisProgramando 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 mais02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
Leia maisProgramação web Prof. Wladimir
Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos
Leia maisHTML - 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 maisWEBDESIGN. 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 mais4.14 - Imagens: <IMG SRC="..."> SRC <IMG SRC="tecnologia.jpg"> único atributo que não pode ser omitido neste tag Nota: img
4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
Leia maisIntrodução ao HTML 5 e Implementação de Documentos
Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar
Leia maisDesenvolvimento 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 maisJavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.
JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um
Leia maisVejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :
TABELAS As tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz
Leia maisOFICINA BLOG DAS ESCOLAS
OFICINA BLOG DAS ESCOLAS Créditos: Márcio Corrente Gonçalves Mônica Norris Ribeiro Março 2010 1 ACESSANDO O BLOG Blog das Escolas MANUAL DO ADMINISTRADOR Para acessar o blog da sua escola, acesse o endereço
Leia maisManual 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 maisManual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web
Manual do Publicador Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Sumário Painel de Administração... 3 1 - Inserção de post... 5 2 Publicação de post com notícia na área headline (galeria de
Leia maisHTML: Listas, Tabelas e Formulários CST Sistemas para Internet
HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Listas Listas de itens são bastante
Leia maisBarra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas
Microsoft Power Point 2003 No Microsoft PowerPoint 2003, você cria sua apresentação usando apenas um arquivo, ele contém tudo o que você precisa uma estrutura para sua apresentação, os slides, o material
Leia maisEsse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.
Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Ele considera que você já tem o Joomla! instalado no seu computador. Caso você queira utilizá lo em um servidor na web,
Leia maisManual de Utilização do PLONE (Gerenciador de página pessoal)
Manual de Utilização do PLONE (Gerenciador de página pessoal) Acessando o Sistema Para acessar a interface de colaboração de conteúdo, entre no endereço http://paginapessoal.utfpr.edu.br. No formulário
Leia maisVoltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções.
13. Editor de leiautes Voltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções. Neste capítulo uma breve explicação será apresentada sobre a organização
Leia maisTags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html
Tags estruturais Cria um comentário Envolve todo um documento html Envolve o cabeçalho de um documento html Fornece informações gerais sobre o documento
Leia mais3 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 maisSíntese da aula anterior
Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações 1 O que vamos fazer hoje? Vamos utilizar o que aprendemos da aula anterior juntamente com Utilização de imagens
Leia maisASSOCIAÇÃO CRISTÃ DE MOÇOS DO RIO GRANDE DO SUL DEPARTAMENTO DE TECNOLOGIA DA INFORMAÇÃO
MANUAL MEDIAWIKI Manual Media Wiki Página 2 Sumário O que é MediaWiki... 4 Acesso ao sistema... 5 Criação do índice principal... 7 Criação de página... 14 Bloqueio/Proteção de página... 17 Manual Media
Leia mais1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO
Leia maisAplicativos 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 maisConstrutor de sites SoftPixel GUIA RÁPIDO - 1 -
GUIA RÁPIDO - 1 - Sumário Introdução...3 Por que utilizar o Construtor de Sites?...3 Vantagens do Construtor de Sites...3 Conceitos básicos...3 Configuração básica do site...5 Definindo o layout/template
Leia maisTutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.
Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. PÁGINA: 2 de 21 Nenhuma parte deste documento pode ser utilizado ou reproduzido, em qualquer meio
Leia maisWebdesign A tag HEAD e as Meta tags
Webdesign A tag HEAD e as Meta tags Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net HEAD Como vimos anteriormente, o nosso documento HTML é
Leia mais7. 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 maisManual do Painel Administrativo
Manual do Painel Administrativo versão 1.0 Autores César A Miggiolaro Marcos J Lazarin Índice Índice... 2 Figuras... 3 Inicio... 5 Funcionalidades... 7 Analytics... 9 Cidades... 9 Conteúdo... 10 Referência...
Leia maisTecnologias 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