Formatação de Textos

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

Download "Formatação de Textos"

Transcrição

1 RESUMO DE HTML O Que é HTML??? HTML é a abreviatura de Hyper Text Markup Language, que pode ser traduzida como Linguagem de Hipertexto Baseada em Códigos. Define um conjunto de estilos como cabeçalhos, parágrafos, listas e tabelas que compões uma página da WWW e serve para indicarmos formatações para textos, inserir imagens e ligações de hipertexto. Tags ou Diretivas. A linguagem HTML possui algumas regras de sintaxe que devemos seguir para obter o resultado desejado. Todo documento HTML apresenta elementos entre parênteses angulares (<ELEMENTOS>), esses elementos são as etiquetas da linguagem HTML, que são os comandos de formatação da linguagem. As etiquetas, tags ou diretivas, tem sua correspondente etiqueta de fechamento (<ETIQUETA>... </ETIQUETA>). Isto é nescessário porque as tags servem para definir a formatação de uma porção de texto, e assim marca-se onde começa e onde termina o texto com formatação especificada por ela. Alguns tags são chamados "vazios" ou unidirecionais, pois não marcam uma região de texto, apenas inserem alguma coisa no documento. As etiquetas serão escritas em maiúsculas apenas para facilitar a visualização, pois você pode misturar ou colocar tudo minúsculo que é igualmente aceito pelos Browsers. Como Editar as Páginas em HTML. As páginas desenvolvidas em HTML são arquivos simples e podem ser lidos e confeccionados em qualquer editor de texto (Microsoft Word, Word Pad, Edit do DOS, NotePad). Depois de editar os códigos e textos é só gravar o arquivo mudando a extenção (ex.:.txt) para.html ou.htm. A diferença entre.htm e.html é que o.html é mais novo e são comandos melhores aceitos e.htm é como se iniciou o html mais não mudou praticamente nada. Tanto faz você salvar em qualquer uma das duas. Então, basicamente, os arquivos HTML possuem dois componentes: 1. O texto propriamente dito; 2. As tags que indicarão os elementos de página: estrutura; formatação; vínculos a outras páginas. Formatação de Textos Em uma página HTML podem existir textos, imagens, itens multimídia e hipertexto. Para isso o documento HTML apresenta a seguinte estrutura: <HTML> <HEAD> <TITLE>Titulo do documento</title> </HEAD> <BODY> texto, imagem, links, etc...

2 </BODY> </HTML> Como o HTML não é uma linguagem de programação, você nunca será avisado de erros cometidos na edição do seu documento. Um simples esquecimento de uma barra pode mudar toda sua página. Seções <HTML> e </HTML>: Identifica o documento como sendo HTML. <HEAD> e </HEAD>: É o cabechalho e contém as informações sobre o documento. <TITLE> e </TITLE>: Define um título que é mostrado no alto da janela do Browser. Todo documento WWW deve ter um título. Esse título é referenciado em busca pela rede, dando uma identidade ao documento, facilitando assim, a classificação em catalogos de busca. <BODY> e </BODY>: Tudo que estiver na seção BODY será mostrado na janela do browser e, consequentemente, apresentado ao leitor. Esta seção pode conter cabeçalhos, parágrafor, listas, tabelas, imagens e links para outros documentos. Dentro da tag <BODY> podemos usar as seguintes opções que não são obrigatórias e caso não existam assumem o valor default: BGCOLOR - especifica uma cor de fundo para a página; BACKGROUND - especifica a imagem (.gif ou.jpg) usada no fundo da tela; BGPROPERTIES = FIXED - fixa uma imagem no fundo da tela; TEXT - define uma cor para o texto; LINK - define uma cor para os links; VLINK - define uma cor para os links já visitados; ALINK - define uma cor para o link na hora que for ativado. Por exemplo: <BODY BACKGROUND=nome_imagem.extencao BGCOLOR=nome_cor TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor> Ou então, podemos usar o código equivalente da cor em hexadecimal: <BODY BACKGROUND=nome_imagem.extencao BGCOLOR=#codigo_cor TEXT=#codigo_cor LINK=#codigo_cor VLINK=#codigo_cor ALINK=#codigo_cor> Não importa a seqüência dos atributos (BGCOLOR, LINK, VLINK...) e sempre se coloca um espaço entre os atributos. Formatação de Textos Podemos formatar o texto mudando a fonte do texto, a cor, colocando em itálico, negrito, sublinhado, fonte espaçada, subscrito, etc. Para todas elas são nescessário delimitar o início e o fim do texto a ser formatado. <FONT COLOR=nome_cor> texto </FONT>: Muda a cor do texto que estiver entre as tags início e fim.

3 FONT FACE=nome_letra> texto </FONT>: Muda o tipo de letra do texto que estiver entre as tags início e fim. <FONT SIZE=tamanho> texto </FONT> ou <Hn> texto </Hn>: Muda o tamanho da letra do texto que estiver entre as tags início e fim. O n da tag <Hn> pode variar de 1 (o maior) até 6 (o menor). <B> texto </B>: Coloca o texto que estiver entre as tags início e fim em negrito. <I> texto </I>: Coloca o texto que estiver entre as tags início e fim em itálico. <TT> texto </TT>: Coloca o texto que estiver entre as tags início e fim com fonte monoespaçada. <U> texto </U>: Sublinha o texto que estiver entre as tags início e fim. (Não é aconselhavel colocar o texto sublinhado, pois os links já são sublinhados e pode confundir). <SUP> texto </SUP>: Coloca o texto que estiver entre as tags início e fim em sobscrito. <SUB> texto </SUB>: Coloca o texto que estiver entre as tags início e fim em subscrito. <S> texto </S>: Taxa o texto que estiver entre as tags início e fim. Ainda falando da disposição de texto na tela, se desejarmos mudar de linha não basta usar o ENTER como em um editor de textos, existem tags específicas para isso, além de outros recursos para alocar um texto na página. São eles: <CENTER> texto </CENTER>: Centraliza o texto em relação à página. <BR>: Quebra de linha, inicia o texto seguinte na linha logo abaixo. <NOBR> texto </NOBR>: Faz com que o texto não tenha quebras de linhas e crie uma barra de rolagem horizontal para poder ver o texto inteiro. <WBR>: Coloca quebra de linhas no comando <NOBR>.a quebra de linha vai ser onde você colocou este comando. <P>: Força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro parágrafo. Existe também um comando de preformatação (<PRE> texto a ser preformatado </PRE>), ele é usado para que o browser aceite seus espaços grandes de uma letra para outra e o ENTER, Se você colocar a tag <PRE> do jeito que você digitar o texto será exatamente como aparecerá no Browser. Linhas horizontais são formas de deixar sua página com mais facilidade de encontrar coisas e também mais apresentável. Essas linhas são boas saídas para textos grandes em que os assuntos são diversos. <HR>: Inclui uma linah horizontal no texto, separando-o em blocos. Nesta tag podemos especificar: WIDTH - nº % do comprimento ou o nº em pixel - Ex.: <HR WIDTH=50%> ou <HR WIDTH=100>; SIZE - espessura do traço - Ex.: <HR SIZE=5>.

4 Exemplo contendo os tags de formatação de texto: <HTML> <HEAD> <TITLE>Exemplo das tags</title> </HEAD> <BODY BGCOLOR=White TEXT=Black> <HR WIDTH=80% SIZE=3> <PRE> <CENTER>E X E M P L O</CENTER> </PRE> <HR WIDTH=80% SIZE=3> <P> <H1>Tamanho1</H1> <BR> <H2>Tamanho2</H2> <BR> <H3>Tamanho3</H3> <BR> <H4>Tamanho4</H4> <BR> <H5>Tamanho5</H5> <BR> <H6>Tamanho6</H6> <BR> Texto1 - <FONT COLOR=Blue>Cor Azul</FONT> <BR> Texto2 - <FONT FACE="Times New Roman">Fonte Times New Roman</FONT> <BR> Texto3 - <B>Negrito</B> <BR> Texto4 - <I>Itálico</I> <BR> Texto5 - <TT>Monoespaçado</TT> <BR> Texto6 - <U>Sublinhado</U> <BR> Texto7 - <SUP>Sobscrito</SUP> <BR> Texto8 - <SUB>Subscrito</SUB> <BR> Texto9 - <S>Taxado</S> <P> </BODY> </HTML> Caracteres Especiais Alguns caracteres especiais são tratados de uma maneira diferente na Web, pelo fato de que nem todos os computadores ligados à Internet estão configurados para visualizar os acentos. Existe uma codificação que permite a qualquer equipamento interpretar os códigos e exibir na tela o caracter desejado. Os códigos funcionam da seguinte maneira: Primeiro colocamos o caracter &; Em seguida a letra que deverá ser acentuada; Coloque a acentuação desejada; Acrescente o ";" (ponto e virgula). Relacionamos abaixo alguns dos caracteres e acentos da HTML: Acentos e Caracteres Código Agudo &_acute; Grave &_grave; Circunflexo &_circ;

5 Til Trema Cedilha & &_tilde; &_uml; &_cedil; & < < > > " " (espaço em branco) Âncoras e Links Âncoras (Links) Para inserir um link, ou seja, uma ligação de uma região do texto (ou imagem) a um outro documento é nescessário usar o tag <A>, da seguinte forma: <A HREF="arq_dest"> âncora </A> onde arq_dest é o URL do documento de destino, âncora é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino. Existem 3 caminhos para se referir um documento de destino: 1. Caminho relativo - Pode ser usado sempre que quiser fazer referência a um documento que esteja no mesmo servidor do documento atual. <A HREF="apresentacaodalicao.html">Clique aqui</a>. 2. Caminho Absoluto - Quando se quer fazer referência a um documento que esteja em outro servidor. <A HREF=" aqui</a>. 3. Ligação com trechos da mesma página - Desvia para o local do trecho desejado na mesma página. Colocarei um exemplo, como se você quisesse voltar para o início dessa página: o o Coloque o nome em algum local que você quer que o link se dirija. Como esse comando colocado no início da página: <A NAME="inicio"></A>. Agora faça o link para essa âncora, como a seguir: <A HREF="#inicio">Clique aqui</a>. NOTA: Para você colocar o endereço de seu na sua página você tem que colocar da seguinte forma: <A HREF="mailto:seu_ "> seu_ </A> Imagens e Animações

6 Imagens Com relação de uso de imagens na Web temos que estas se dividem em duas categorias gerais que são as imagens in-line e as externas. As imagens in-line são apresentadas na página junto com os vínculos e com o texto e são carregadas automaticamente. Já as imagens externas são carregadas somente por demanda (download), através de vínculos. Independente de sua categoria, as imagens podem se apresentar em dois formatos:.gif e.jpg. GIF - Este padrão é mais conhecido e mais compatível com os navegadores existentes. Recomendado para ícones com menos de 256 cores, cores lisas, puras, preto e branco. Sua qualidade é bem superior ao formato JPG, pois o tamanho do arquivo é maior. Suas imagens podem ser transparentes. JPG ou JPEG - Foi o padrão proposto pelo comitê ISO e é geralmente usado para imagens mais complexas (fotográficas). Permite alta taxa de compressão, por isso gera um arquivo menor, o que implica numa perda de informação e qualidade. O elemento IMG, ou seja, a tag <IMG>, insere as imagens que serão apresentadas junto ao texto. Um atributo SRC, que é o mais importante dessa tag, deve estar presente da seguinte forma: Se a imagem estiver na mesma pasta que a sua página então a tag seria assim: <IMG SRC="nome_imagem.extenção"> Se a imagem estiver em uma pasta diferente da que sua página está, então você tem que colocar o endereço desta pasta e depois o arquivo que contém a sua imagem. Digamos que sua página esta na pasta "pagina" e a imagem (img.gif) que você vai colocar esta na pasta "imagens" que esta dentro da pasta "pagina", ou seja, essa imagem está dentro da pasta "\imagens\img.gif". Então a tag seria: <IMG SRC="imagens\img.gif"> DICA: Se você quiser colocar uma imagem que está em outra página, basta clicar com o botão direito do mouse em cima da imagem e seleciona o opção propriedades e copiar a endereço URL e colocar no atributo SRC. Juntamente com a tag <IMG> podemos usar alguns parâmetros como: BORDER - para determinar a moldura da imagem; WIDTH - para determinar a largura da imagem; HEIGHT - para determinar a altura da imagem; ALIGN - para alinhar as imagens de várias formas: LEFT - alinha a imagem a esquerda do texto; RIGHT - alinha a imagem a direita do texto; TOP - alinha o texto com o topo da imagem; MIDDLE - alinha o texto com o meio da imagem; BOTTOM - alinah o texto com a parte inferior da imagem. ALT - quando a pessoa deixar o mouse sobre a imagem aparecerá o que você escreveu. Por exemplo: <IMG ALT="explicação da imagem" BORDER=4 WIDTH=50 HEIGHT=20 ALIGN=Left> Uma imagem pode funcionar como vínculo, incluindo-se a tag <IMG> entre as partes de abertura e fechamento de uma tag de vínculo <A>. Assim temos: <A HREF="arq.html"><IMG SCR="img.gif"></A>

7 Para se projetar uma página deve-se procurar um equilíbrio com relação a quantidade de imagens e cores e a necessidade de transmissão de informações. O uso excessivo de imagens, imagens grandes, painéis de fundo tornará a página mais lenta ao ser carregada e o que, em muitos casos, levará os usuários que tiverem uma conexão lenta de rede a desistirem de carregar esta página. Para que isso não aconteça, verifique a necessidade do uso dessa ou daquela imagem, mantenha as imagens pequenas reutilize-as sempre que possível. Animações Com relação ao uso de mídias em HTML é necessário a utilização de vínculos correspondente ao caminho URL do arquivo externo que se deseja inserir em sua página.<a REF="arq_ext">Arquivo</A>. Neste contexto entram os arquivos de som e vídeo. Som O primeiro caso, o som, é utilizado para transmitir informações que não sejam na forma de ilustração ou palavras e até mesmo para desejar boas vindas ao usuário que acaba de carregar aquela página. Esses arquivos geralmente possuem extensão.wav e.mid. Agora vamos aos comandos: <EMBED> <BGSOUND> Como o comando <EMBED> não é aceito pelo IE 3.0 e alguns outros browsers desconhecidos, você terá que colocar o comando duas vezes, um com o <EMBED> para o Netscape e <BGSOUND> para outros Browsers. Esta tags pode conter os seguintes parâmetros: SRC - define o caminho para o arquivo de som; AUTOSTART - define que ao ser carregado ele já deve ser tocado ou que o visitante deve clicar no play para tocar, TRUE para tocar automaticamente e FALSE para quando o visitante apertar play. AUTOLOAD - define que ele deve ser automaticamente começado a baixar o arquivo de som quando entrar na página, ou o visitante deve apertar o play para baixar o arquivo, TRUE para baixar automaticamente e FALSE para quando o visitante apertar play. LOOP - define o número de vez que a música será tocada, TRUE para tocar infinitas vezes. HIDDEN - define se você quer que o controle ficam sumidos ou não, TRUE para deixar invisível e caso queira os controles não precisa colocar FALSE. WIDHT e HIGHT define o tamanho dos controles. Então os comandos de sua página ficariam assim: <EMBED SCR="musica.mid" AUTOSTART="true" AUTOLOAD="true" LOOP="true" HIDDEN="true"> <BGSOUND SCR="musica.mid" AUTOSTART="true" AUTOLOAD="true" LOOP="true" HIDDEN="true"> Vídeo Já os arquivos de vídeos fornecem informações que as imagens estáticas não são capazes de transmitir. Suas extensões são geralmente.mpg,.mov,.avi. É interessante utilizar informações sobre o formato e o tamanho do arquivo de mídia externo A tag <IMG> possui atributos que permitem a execução in-line de arquivos de som e vídeo. O atributo DYNSRC (para IE) inclui arquivos de vídeo: <IMG DYNSRC="arquivo.avi SRC="arquivo.gif ALT="[a arquivo]">.

8 Letreiros Em HTML é possível a criação de letreiros, ou seja, uma linha rolável que se moverá de um lado ao outro da página da Web. Para que este efeito seja possível basta alocar o texto que se deseja transformar em letreiro entre as tags de abertura e fechamento <MARQUEE> texto </MARQUEE>. Esta tag possui vários atributos: BEHAVIOR Atributo 1. SCROOL 2. SLIPE 3. ALTERNATE DIRECTION (somente se o letreiro for SCROOL) LOOP 1. LEFT 2. RIGHT SCROLLAMOUNT SCROLLDELAY BGCOLOR HEIGHT WIDTH HSPACE VSPACE ALIGN TOP MIDDLE BOTTOM Utilização 1. Rola de um lado ao outro da tela e até desaparecer. 2. Rola o letreiro da direita para esquerda e para. 3. Faz o letreiro saltar de um lado da tela para outro. 1. Move o letreiro da esquerda para direita. 2. Move o letreiro da direita para esquerda. Define o número de vezes que o letreiro ralará na tela. Define o número de pixel para locação do letreiro. Define o tempo da animação em milessegundos. Define a cor de fundo da caixa que delimita o letreiro. Define a altura da caixa que delimita o letreiro. Define a largura da caixa que delimita o letreiro. Define o espaço entre as bordas esquerda e direita e o texto. Define o espaço entre as bordas inferior e superior e o texto. Define o alinhamento do letreiro com relação ao texto.

9 Listas As lista são utilizadas para organizar o texto quando necessário uma relação de itens ordenados ou não. A HTML define 3 tipos de listas: Listas Ordenadas ou Numeradas - essas listas são delimitadas pelas tags <OL>(inicializa uma lista)... </OL>(finaliza uma lista) e cada item desta lista começa com a tag <LI>(sem o fechamento). São aquelas que possui um número. O atributo TYPE define o tipo de numeração da lista. Assim, A (letras maiúsculas), a (letras minúsculas), I (algarismos romanos) e 1 (números arábicos). Exemplo: Código <OL> <LI>item 1 <LI>item 2 </OL> Saída no Browser 1. item 1 2. item 2 Lista Não-Ordenadas ou com Marcadores - são aquelas que os itens são marcadores ou outros símbolos. Estas listas são indicadas pelas tags </UL>... </UL>. Os elementos dessa lista também são separados por </LI>. Nesta lista o atributo TYPE define o tipo de marcadores de cada uma delas. Assim, disk (marcador preenchido), square (quadrado), circle (marcador vazado). Exemplo: Código <UL> <LI>item 1 <LI>item 2 </UL> Saída no Browser o item 1 o item 2 Listas de Definição ou de Glossários - são aquelas em que cada item tem dois componetes, um termo e uma definição. Estas listas são indicadas pelas tags <DL>... </DL>. As tags <DT> e <DD>, unidirecionadas, respectivamente, indicam o termo a ser definido e a definição desse mesmo termo. Exemplo: Código <DL> <DT>item 1 <DD>item 2 <DD>item 3 </DL> Saída no Browser item 1 item 2 item 3 Tabelas As tabelas são usadas para organizar o conteúdo de uma página, ou seja, imagens em linhas e colunas. Com tag <TABLE> conteúdo da tabela </TABLE> indicamos que se trata de uma tabela.

10 <CAPTION>... </CAPTION> - para acrescentar um título na tabela. <TR>... </TR> - para informar onde começa (<TR>) e onde termina (</TR>) cada linha da tabela. <TH>... </TH> ou <TD>... </TD> - para identificar o início e o fim de cada célula. A diferença entre <TH> e <TD> é que o conteúdo da célula da tag <TH> é escrita em negrito e centralizada. Agora já podemos fazer uma tabela com estes comandos, que ficaria assim: Tabela célula 1 célula 2 célula 3 célula 4 Os comandos da tabela acima seria assim: <TABLE> <CAPTION> Tabela </CAPTION> <TR> <TH> célula 1 </TH> <TH> célula 2 </TH> </TR> <TR> <TD> célula 3 </TD> <TD> célula 4 </TD> </TR> </TABLE> Atributos para a tag <TABLE>: BORDER - define a espessura da borda; WIDTH - define a largura da tabela, pode ser definida em % ou valor absoluto (com números); ALIGN - alinhamento horizontal (Right, Center, Left); BGCOLOR - para alterar a cor de fundo; BACKGROUND - permite colocar uma imagem no fundo; CELLSPACING - define o espaço existente entre as células da tabela; CELLPADDING - define o espaço existente entre as bordas da célula e seu conteúdo; BORDERCOLOR - usado para alterar a cor da borda. Atributos para as tags <TD> e <TH>: COLSPAN - especifica quantas colunas da tabela a célula vai ocupar; ROWSPAN - especifica quantas linhas da tabela a célula vai ocupar; WIDTH - define a largura de cada célula, pode ser definida em % ou valor absoluto (com números); HEIGHT - define a altura de cada célula, pode ser definida em % ou valor absoluto (com números); ALIGN - alinhamento horizontal (Right, Center, Left); VALIGN - alinhamento vertical (Top, Middle, Bottom); BGCOLOR - alterar a cor de fundo desse elemento. Uma tabela usando alguns elementos destes ficaria assim:

11 célula 1 célula 3 célula 4 célula 2 Códigos da tabela acima; <TABLE BORDER=1 BORDERCOLOR=#ffcc00 BGCOLOR=#6666ff CELLSPACING=2 CELLPADDING=10 ALIGN=center> <TR> <TD COLSPAN=2>célula 1</TD> <TD ROWSPAN=2>célula 2</TD> </TR> <TR> <TD>célula 3</TD> <TD>célula 4</TD> </TR> </TABLE> Frames Os frames permitem a divisão da tela em diferentes regiões onde pode-se apresentar diferentes páginas. Isso possibilita, por exemplo, que se determine a área da tela para ser a página principal e outras áreas para menus ou links. A tag <FRAMESET> cria um documento de definição de frames, que é onde será criado o layout de cada frame e indicado o nome dos documentos que serão apresentados. Essa tag substitui a tag <BODY> quando for utilizada. Deve-se definir um dos dois atributos a tag <FRAMESET> para se ter o layout desejado: COLS e ROWS. Com o atributo COLS indicamos quantas colunas teremos na página - <FRAMESET COLS="lagura_coluna, largura_coluna, *"> (a largura podde ser definida em porcentagem (%) ou em valor absoluto) - Assim, divide-se quantos frames foram indicados e pelo * (asterístico), definimos que o frame ocupará todo o espaço restante da tela. O atributo ROWS define quantas linhas a frame será dividida - <FRAMESET ROWS="50%, 50%"> - definimos que a página será dividida em 2 frames horizontais. O atributo SRC indica qual página será chamada em cada frame criado e o atributo NAME atribui o nome a esse frame. Existem ainda outros atributos que estão relacionados abaixo: Atributos MARGINWIDTH MARGINHIGHT SCROLLING = YES, NO ou AUTO Utilização Determina as margens esquerda e direita do frame. Determina as margens superior e inferior do frame. Configura a barra de rolagem, podendo aparecer ou não. Pode ainda, aparecer somente quando o texto ultrapassar o tamanho da célula

12 (AUTO). NORESIZE Impede que as barras que delimitam os frames sejam redimensionados. O código de um documento HTML contendo frames ficaria assim: <HTML> <HEAD> <TITLE> Título da Página </TITLE> </HEAD> <FRAMESET COLS="200, *"> <FRAME SCR="página que ficará no 1ª frame" NAME="nome do 1ª frame"> <FRAME SCR="página que ficará no 2ª frame" NAME="nome do 2ª frame"> </FRAMESET> </HTML> A tag <NOFRAME>... </NOFRAME> coloca o código que substituirá a página caso o Browser não dê o suporte ao recurso de frames. Caso o Browser entenda frames, tudo que estiver entre tag de abertura e fechamento <NOFRAME>... </NOFRAME> será ignorado e o frame funcionará conforme programado. Exemplo: <HTML> <HEAD> <TITLE> Título da Página </TITLE> </HEAD> <FRAMESET COLS="200, *"> <FRAME SCR="página que ficará no 1ª frame" NAME="nome do 1ª frame"> <FRAME SCR="página que ficará no 2ª frame" NAME="nome do 2ª frame"> <NOFRAMES> <BODY> Aqui fica sua página sem frames para quem não consegue ver sua frames. </BODY> </NOFRAMES> </FRAMESET> </HTML> Além dos atributos já citados, temos também o TARGET. Quando iniciamos um frame, geralmente colocamos um nome para que possa ser identificado. Para acessar esse frame que colocamos nome, usamos TARGET, que define onde a página deverá ser carregada. O atributo tem quatro valores que são: TARGET="nome do frame" - carrega no frame especificado; TARGET="_top" - limpa a tela e abre o arquivo que esta sendo chamado; TARGET="_blank" - abre uma nova janela para exibir o documento; TARGET="_self" - carrega o documento no mesmo frame que o chamou. Exemplos: <A HREF=" TARGET="menuhtml"> <A HREF="apresentacaodalicao.html" TARGET="_top">

13 Formulários Os formulários em uma página WEB permitem coletar informações das pessoas que visitam a página. através de algumas diretivas especiais podemos definir as literais e o formato dos objetos de resposta. Também definimos que será tomada assim que o formulário for preenchido. Para criar um formulário faz-se necessário o uso da tag <FORM> onde serão incluídos os elementos desse formulário. Essa tag contém dois atributos: METHOD e ACTION. 1) O atributo METHOD pode ter o valor GET ou POST, que determina a maneira como os dados do formulário serão enviados para processamento. A diferença entre os dois é a forma que cada um "empacota" esses dados. 2) O atributo ACTION é um ponteiro que indica o script que processa as informações que se obtém a partir do formulário. Deve conter a URL completa do programa que irá receber dados do formulário. Por exemplo Também tem o atributo TARGET que é opcional e só é necessário quando se utiliza frames, ele indica onde aparecerá a página de confirmação do formulário. A tag <INPUT> indica um elemento de formulário simples e possui dois atributos que são TYPE e NAME. 1) As opções que o atributo TYPE oferece são: TEXT - para campos de entrada de texto; Exemplo: RADIO - para botões de rádio; Exemplo: CHECKBOX - para caixas de verificação; Exemplo: PASSWORD - funciona da mesma forma que o atributo TEXT, exceto que todas as letras digitadas aparecem como um asterístico (*). Exemplo: 2) O atributo NAME, na maioria dos casos, define o nome do campo. 3) O atributo VALUE (valor), neste caso, pode ser usado se você quiser, ele define um valor prévio para cada campo, de tal forma que quando a página seja carregada este valor já esteja preenchido podendo ser alterado pelo visitante. 4) O atributo SIZE define o tamanho do campo e é definido no número de caracteres. Se você quiser um campo de 40 caracteres, você deverá definir como SIZE=40. Mas note que esse valor não limita o campo em 40 caracteres, ele define o tamanho que ele será mostrado na página. 5) O atributo MAXLENGHT (comprimento máximo) define o número máximo de caracteres que podem ser digitados nos campos. 6) O atributo CHECKED é usado para marcar as opções RADIO e CHECKBOX. Lembrando que a opção RADIO só pode ter um selecionado. Agora vamos ver alguns exemplos: Botões de escolha <INPUT TYPE=Radio NAME=sexo VALUE=Mas CHECKED>Masculino <INPUT TYPE=Radio NAME=sexo VALUE=Fem>Feminino Masculino Feminino O atributo NAME, neste caso, deve ser igual para todos os campos. O atributo VALUE deve conter o valor deste campo, este será o valor processado e repassado ao programa.<\td> Botões de checagem

14 Na sua casa tem:<br> <INPUT TYPE=Checkbox NAME=eletro1 VALUE=TV>Televisão<BR> <INPUT TYPE=Checkbox NAME=eletro2 VALUE=Radio>Rádio<BR> <INPUT TYPE=Checkbox NAME=eletro3 VALUE=Video>Vídeo Cassete<BR> Na sua casa tem: Televisão Rádio Vídeo Cassete O atributo NAME, neste caso, deve ser diferente para cada campo. O atributo VALUE deve conter o valor deste campo, este será o valor processado e repassado ao programa.<\td> A tag <SELECT>... <SELECT> permite que você defina uma lista de opções para a seleção do visitante. O atributo NAME define o nome desta lista e SIZE define quantos elementos irão aparecer na tela. Caso ele seja omitido, somente uma opção aparece de cada vez. Cada opção da lista recebe uma tag <OPTION>, e o atributo VALUE deste elemento irá definir o valor de cada opção, que será a informação fornecida ao programa de acordo com a seleção feita. Agora vamos ver um exemplo: Seleção Qual o estado que você mora???<br> <SELECT NAME=estado> <OPTION VALUE=SP>SP <OPTION VALUE=RJ>RJ <OPTION VALUE=MG>MG <OPTION VALUE=Outro>Outro </SELECT> Qual o estado que você mora??? Se você colocar SIZE=2 então fica assim: Qual o estado que você mora??? As tags <TEXTAREA>... <TEXTAREA> (área de texto) permite definir um campo de texto com várias linhas. O atributo ROWS e COLUMNS definem o tamanho da área em que o visitante vai escrever, ROWS define o número de linhas da caixa de texto e COLUMNS o número de colunas, e o atributo COLS define quantos caracteres cada linha possui. O atributo NAME define o nome da caixa de texto. Se você incluir o atributo WRAP=hard a sua caixa de texto não ira possuir uma barra de scroll horizontal. Agora vamos ver um exemplo: Caixa de Texto <TEXTAREA NAME=comentarios ROWS=3 COLUMNS=37> Aqui você coloca o seu comentário </TEXTAREA>

15 Envio e limpeza de dados: <INPUT TYPE=Reset Value=...> O valor RESET no atributo TYPE define um botão que limpa todos os campos, colocando os mesmos valores de quando a página foi carregada. No atributo VALUE pode-se definir o que estará escrito no botão, por exemplo, "Limpar". Caso nenhum valor seja definido aparecerá "Reset". <INPUT TYPE=Submit NAME=... Value=...> O valor SUBMIT (submeter) no atributo TYPE define um botão de envio de informações, ou seja, um botão que ao ser acionado executa o programa associado ao formulário (aquele que foi definido em ACTION no tag FORM), passando para ele os dados preenchidos. Assim como no tipo RESET, o atributo VALUE define o que estará escrito no botão. O NAME é opcional. <INPUT TYPE=Image NAME=... SRC=... ALT=...> Uma outra alternativa para o tipo SUBMIT seria o uso de uma imagem em seu lugar. Para isso, existe o tipo IMAGE. Neste caso, passam a existir os atributos SRC e ALT normalmente usados em elementos que definem uma imagem. <INPUT TYPE=Hidden NAME=... Value=...> O valor HIDDEN (escondido) define dados que devem ser passados ao programa, mas não devem aparecer para quem está vendo a sua página. Neste caso, NAME identifica o dado e VALUE define o seu valor. Para fazer um formulário tem que ser usado o CGI gratuito (ex.: e este CGI precisa de alguns comandos: AnyFormMode - deve ser preenchido com o valor "MAIL"; AnyFormDisplay - pode ser preenchido com "SHORT", "STANDARD", com uma URL (endereço) da página que será mostrada após os dados serem enviados ou com "NONE"; AnyFormTo - deve conter o no qual será enviado as informações do formulário; AnyFormFrom - deve conter o de quem está preenchendo o formulário; AnyFormSubject - deve conter o assunto do formulário para quando você receber o contendo as informações preenchidas do formulario você identifica-la. Alguns destes elementos são normalmente definidos no elemento INPUT com o atributo TYPE e o valor HIDDEN: <INPUT TYPE=Hidden NAME=AnyFormTo VALUE="maurinho@brazil.zzn.com"> Agora vamos ver um exemplo completo de um formulário: Código: <B>Preencha o formulario e clique no botao ok.:</b> <P> <FORM ACTION="

16 METHOD="POST"> <INPUT TYPE="hidden" NAME="AnyFormDisplay" VALUE=NONE> <INPUT TYPE="hidden" NAME="AnyFormMode" VALUE="mail"> <INPUT TYPE="hidden" NAME="AnyFormSubject" VALUE=" s da minha HomePage"> <INPUT TYPE="hidden" NAME="AnyFormTo" <TABLE BORDER="0"> <TR> <TD> .:</TD> <TD><INPUT TYPE="text" SIZE="40" NAME="AnyFormFrom"></TD> </TR><TR> <TD>Nome.:</TD> <TD><INPUT TYPE="text" SIZE=35 NAME="Nome.:"></TD> </TR><TR> <TD>Idade.:</TD> <TD><INPUT TYPE="text" SIZE=3 NAME="Idade.:"></TD> </TR><TR> <TD>Sexo.: </TD> <TD> <INPUT TYPE="Radio" NAME=sexo VALUE=Mas CHECKED>Masculino <INPUT TYPE="Radio" NAME=sexo VALUE=Fem>Feminino </TD> </TR><TR> <TD>Cidade.:</TD> <TD><INPUT TYPE="text" SIZE=20 NAME="Cidade.:"></TD> </TR><TR> <TD>Estado.:</TD> <TD> <SELECT NAME="estado"> <OPTION VALUE=SP>SP <OPTION VALUE=RJ>RJ <OPTION VALUE=MG>MG <OPTION VALUE=Outro>Outro </SELECT> </TD> </TR><TR> <TD>País.:</TD> <TD><INPUT TYPE="text" SIZE=20 NAME="País.:"></TD> </TR><TR> <TD>Mensagem.:</TD> <TD><TEXTAREA NAME="Mensagem" ROWS="4" COLS="35"></TEXTAREA></TD> </TR><TR> <TD></TD> <TD><CENTER><INPUT TYPE="image" SRC="ok.gif"></CENTER></TD> </TABLE> </FORM> Agora veja como ficou este formulário:

17 UpLoad Depois que você termina de fazer a sua página, você tem que coloca-la na internet, este processo é chamado de UpLoad. 1) Primeiro você vai precisar de um programa FTP (transferência de arquivos por protocolo). O mais conhecido é o WS_FTP LE 4.6. Você pode achar o FTP Explorer mais fácil de usar, faça o DownLoad aqui. 2) Depois de ter o programa, faça a inscrição em qualquer site de hospedagem gratuito (ou pago). Um site de hospedagem gratuito bastante conhecido é o ele é fácil de se cadastrar, pois é em português. 3) Depois de feita a inscrição você terá sua senha e seu login. Abra o programa FTP Explorer, escolha a opção adicionar endereço (ADD), coloque o endereço do FTP do provedor (neste caso ftp.terravista.pt) no HOST ADDRESS, coloque o login e a senha. Essas são as configurações básicas, o resto não iremos precisar.

18 4) Clique em connect para conectar com o servidor e automaticamente ele irá te mostrar a sua pasta no servidor com provavelmente um página já no diretório. (Obs.: O arquivo da sua página principal tem que se chamar index.html). 5) Depois basta clicar em UpLoad e mandar os arquivos desejados, no caso do FTP Explorer você clica na seta para cima e escolhe os arquivos. 6) Depois de colocar sua página na internet, teste as páginas, os links e sa figuras para ver se estão todos certos, pode ser que no seu computador seja tudo visualizado da forma que você quer, mas no provedor mude, sempre que colocar mais arquivos no provedor teste a página novamente. Serviços Grátis na Internet Incremente sua Página Banners Contadores Freehost (Espaço) Fre ( ) GuestBook Redirecionadores

19 Banners Banners é onde você divulga seu site sem pagar nada. É simples, eles lhe fornecem um código para colocar um banner deles na sua página e então você lhes envia o seu banner (desenho que tenha a propaganda de sua página) que eles colocam em outras páginas. Link Exchange: Tamanho de 468 x 60, Crédito de 2:1 BannerPlus: É um bom sistema de banner, Crédito de 2:1 Click Banner: Em minha opinião é o melhor site de sistemas de banner. 160X50, 400X40, 468X60, 2:1 Banner-Link: Mais famoso sistema nacional. 468X60, 2:1 Fast-Banner: Sistema novo, também com 468X60-2:1 SmartClicks: Tamanho de 468 x 60,Crédito de 2:1 Contadores BeSeen: Fastcounter: Sitemeter: Hit Box: Internet Count: Site-Stats: Page Count: NedStat: SuperStats: TheCounter: Vários tipos de contadores para você escolher. Rápido e prático, oferece vários tipos e estatísticas. Bom contador, envia relatório de visitas. Bom sistema de contadores. Peca pela qualidade da imagem do contador. 10 diferentes tipos de contador. Hits ilimitados, relatórios das visitas. Bom sistema de contador. Contador bastante usado por Webmasters. Excelente contador. Exemplos prontos de contadores, aqui você pode pegá-los diretamente e colocar na sua página, é só você colocar o seu "nome ou apelido" no lugar do "username ou codinome" do contador. Para colocar um contador na sua página, siga os seguintes passos: 1. No local de sua página onde você quer mostrar o contador, coloque por ex.: ( <IMG SRC=" dd=a"> ) substituindo "codinome" pelo seu nome. As letras minúsculas e maiúsculas devem ser respeitadas; 2. Depois de "Count.cgi?", você pode especificar diversos parâmetros. Esses parâmetros devem ser separados pelo caractere. Veja logo abaixo o que cada parâmetro faz: ft = n - n é o tamanho da borda (1 a 5);

20 dd = A - A especifica o tipo de contador; df = codinome - especifica o nome do arquivo em que ficará a contagem; md = n - n é o número de dígitos do contador. Freehost (Espaço) Agora você não paga absolutamente nada para garantir sua presença na Web! Confira abaixo alguns serviços de hospedagem gratuita na Internet. Xoom Tripod Geocities Terra à Vista Angelfire Hypermart Starmedia Órbita Webjump Um ponto forte deste serviço é que ele não exibe aquelas telas "Splash" como a Geocities, além de contar com um vasto acervo multimídia com milhares de images, gifs, fotos e sons. Hoje você tem direto a espaço ILIMITADO.Mas tem uma barra enorme de propaganda no topo. Serviço que oferece 11Mb, é um pouco mais lento que a Xoom. Possui um assistente para criar a homepage On-Line e é uma ótima opção para iniciantes. Oferece 11Mb gratuitos e um . Como desvantagem a Geocities é lenta (pela grande quantidade de usuários) e abusa das propagandas com telas splash e um quadradinho que perseque o visitante para onde quer que ele vá. Serviço de host de Portugal que oferece 7Mb de espaço. É fácil de se cadastrar, pois ele é todo em português. É bom para quem esta iniciando. Oferece 5Mb e é ótimo para quem não entende nada de HTML pois as páginas são geradas através de um assistente.como desvantagem só permite o Upload através do Browser (1 arquivo de cada vez) além de não aceitar arquivos que não sejam HTML, CSS ou Imagens.Além disso as imagens são transferidas automaticamente para o diretório images/ o que dificulta a vida de quem constrói a página off-line. Serviço de FREEhost com subdomínio ( Oferece 10Mb de espaço em disco, ilimitados s aliases (...@seunome.hypermart.net), aceita CGIs e também oferece a possibilidade de proteger diretórios por senha. É um pouco lento e também abusa das propagandas exibindo uma tela splash que dá reload a cada 2 minutos. Serviço de free host que eferece 25 Mb de espaço, é ótimo para quem não entende nada de HTML, tem um editor on-line. Serviço de free-host com 25 MB. Fre ( ) Estes são os principais serviços de Fre do Brasil e do Mundo. Com eles você pode enviar e receber s incluindo anexos e com uma vantagem: Você pode checar seu e- mail de qualquer computador conectado à Internet: é só acessar o site, digitar o login e pronto! Hotmail O serviço de grátis mais conhecido do mundo, oferece

21 entre outras coisas um serviço de notícias no qual o usuário recebe um avisando sobre as novidades do tema escolhido (tudo em inglês). ZipMail Yahoo! Starmedia MailBr ZZN Serviço nacional que oferece uma conta grátis de com a vantagem de estar num servidor seguro, garantido pelo protocolo SSL o que garante privacidade total para suas mensagens mais secretas. Não é muito bom para mandar arquivos. Tão simples quanto o nome, nele você cria um e os dados já ficam armazenados no seu computador, assim é só chegar lá e digitar a senha que você já tem acesso aos seus s.vem com um serviço de notícias por e também um software que avisa quando há novas mensagens no servidor. Não é apenas um serviço de s grátis mas também traz as últimas notícias do dia, hospedagem gratuita de homepages pessoais e também um bate-papo. Tem 5 MB de espaço, vários domínios: (seunome@rockbr.com.br,seunome@linuxbr.com.br, seunome@quake-br.com.br etc.) Onde você cria seu sistema de grátis. Por Exemplo: alguém@seunome.zzn.com Guest Book Livro de visitas para sua home page, onde os seu visitantes podem deixar suas sugestões e críticas. Lemon GuestBook: Lpage: TheGuestbook: DreamBook: GuestBook em português. Você se inscreve e tem seu guestbook. Exibe um banner deles em cada guestbook. Bom GuestBook. Redirecionadores Seu endereço é muito complicado? Então obtenha gratuitamente uma URL de redirecionamento com ' ' etc... Pagina.de: CJB: web-page: come.to: (colocar banner deles)

22 Para Inserir Data e Hora Outros Recursos Para Inserir Data e Hora num documento HTML, como por exemplo: Hoje é Terça - Feira, 7 de Fevereiro de São 9 horas e 43 minutos! Código: Entre <HEAD>... </HEAD>: <script language="javascript"> function plural() { var hora=new Date() var horas=hora.gethours() var singular="hora" if (horas>1) {singular="horas"} document.write(singular) } </script> <script language="javascript"> function plural2() { var minuto=new Date() var minutos=minuto.getminutes() var singular2="minuto" if (minutos>1) {singular2="minutos"} document.write(singular2) var} </script> Entre <BODY>... </BODY>: <script language="javascript"> function dia() { dia = new Date() document.write(dia.getdate()) } function mes(){ var mes1=new Date() var mes2=mes1.getmonth() var month="janeiro" if(mes2 == 0) {month="janeiro"} else if(mes2 ==1) {month= "Fevereiro"} else if(mes2 ==2) {month="março"} else if(mes2 ==3) {month="abril"} else if(mes2 ==4) {month="maio"} else if(mes2 ==5) {month="junho"} else if(mes2 ==6) {month="julho"} else if(mes2 ==7) {month="agosto"} else if(mes2 ==8) {month="setembro"} else if(mes2 ==9) {month="outubro"} else if(mes2 ==10) {month="novembro"} else if(mes2 ==11) {month="dezembro"} document.write(month) } function hora() {

23 hora=new Date() document.write(hora.gethours()) } function minuto() { minuto=new Date() document.write(minuto.getminutes()) } function weekday( ) { var myday=new Date().getDay() if(myday == 0) {day="domingo"} else if(myday == 1) {day="segunda - Feira"} else if(myday == 2) {day="terça - Feira"} else if(myday == 3) {day="quarta - Feira"} else if(myday == 4) {day="quinta - Feira"} else if(myday == 5) {day="sexta - Feira"} else if(myday == 6) {day="sábado"} document.write(day) } function ano( ) { var ano=new Date().getYear() var aa=new Date().getYear() if(ano == 100) {aa="2000"} else if(ano == 101) {aa="2001"} else if(ano == 102) {aa="2002"} else if(ano == 103) {aa="2003"} else if(ano == 104) {aa="2004"} else if(ano == 105) {aa="2005"} else if(ano == 106) {aa="2006"} else if(ano == 107) {aa="2007"} else if(ano == 108) {aa="2008"} else if(ano == 109) {aa="2009"} else if(ano == 110) {aa="2010"} else if(ano == 111) {aa="2011"} else if(ano == 112) {aa="2012"} else if(ano == 113) {aa="2013"} else if(ano == 114) {aa="2014"} else if(ano == 115) {aa="2015"} else if(ano == 116) {aa="2016"} else if(ano == 117) {aa="2017"} else if(ano == 118) {aa="2018"} document.write(aa) } </script> Na posição em que você desejar escrever a data e hora atuais: <script>weekday()</script>, <script>dia()</script> de <script>mes()</script> de <script>ano()</script>. São <script>hora()</script> <script>plural()</script> e <script>minuto()</script> <script>plural2()</script>! Para Desabilitar o Botão Direito do Mouse Caso a sua intenção seja "esconder" o código de sua página, você pode desabilitar o botão direito do mouse através do seguinte código escrito entre <HEAD>... </HEAD>:

24 <script language="javascript"> function norightclick() { if (event.button==2) { alert('página Carregada com Sucesso!') } } document.onmousedown=norightclick </script> Tabela com 99 códigos de cores. Black # % Black # % Black # % Black #4C4C4C 60% Black # % Black #7F7F7F 40% Black # % Black #B2B2B2 20% Black #CCCCCC 10% Black #E5E5E5 White #FFFFFF Blue #0000FF Cyan #00FFFF Green #00FF00 Yellow #FFFF00 Red #FF0000 Magenta #FF00FF Purple #9900CC Orange #FF6600 Pink #FF9900 Dark Brown # Powder Blue #CCCCFF Navy Blue # Deep Navy Blue # Twilight Blue #6666CC Pastel Blue #9999FF Baby Blue #6699FF Electric Blue #6666FF Desert Blue # Sky Blue #00CCFF Ice Blue #99FFFF Light BlueGreen #99CCCC Ocean Green # Moss Green #336666

25 Dark Green # Forest Green # Grass Green # Kentucky Green # Light Green #33CC66 Spring Green #33CC33 Turquoise #66FFCC Sea Green #33CC99 Faded Green #99CC99 Ghost Green #CCFFCC Mint Green #99FF99 Army Green # Avocado Green # Martian Green #99CC33 Dull Green #99CC66 Chartreuse #99FF00 Moon Green #CCFF66 Murky Green # Olive Drab # Khaki # Olive # Banana Yellow #CCCC33 Light Yellow #FFFF66 Chalk #FFFF99 Pale Yellow #FFFFCC Brown # Red Brown #CC6633 Gold #CC9933 Autumn Orange #FF6633 Light Orange #FF9933 Peach #FF9966 Deep Yellow #FFCC00 Sand #FFCC99 Walnut # Ruby Red # Brick Red #CC3300 Tropical Pink #FF6666 Soft Pink #FF9999 Faded Pink #FFCCCC Crimson # Regal Red #CC3366 Deep Rose #CC3399 Neon Red #FF0099

26 Deep Pink #FF6699 Hot Pink #FF3399 Dusty Rose #CC6600 Plum # Deep Violet # Light Violet #FF99FF Violet #CC66CC Dusty Plum # Pale Purple #CC99CC Majestic Purple #9933CC Neon Purple #CC33FF Light Purple #CC66FF Twilight Violet #9966CC Easter Purple #CC99FF Deep Purple # Grape # Blue Violet #9966FF Blue Purple #9900FF Deep River #6600CC Deep Azure #6633FF Storm Blue # Deep Blue #3300CC

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

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

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

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

Leia mais

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

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

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

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

Faculdade de Tecnologia Senac Goiás Aluno: Maurillio Araujo Oliveira Fundamentos de TI

Faculdade de Tecnologia Senac Goiás Aluno: Maurillio Araujo Oliveira Fundamentos de TI Faculdade de Tecnologia Senac Goiás Aluno: Maurillio Araujo Oliveira Fundamentos de TI HTML Conceito GERAL Goiânia, 20 de Maio de 2015. A História Do HTML Em 1980 Tim Berners-Lee propôs um projeto baseado

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

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

Programação para Internet I

Programaçã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 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

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

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

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

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

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

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

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

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

Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania

Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania Sumário Objetivos do Blog... 2 Log-in... 3 Esqueci minha senha... 4 Utilizando o Blog... 5 Encontrando seu Blog... 5 Conhecendo o

Leia mais

NewAgent enterprise-brain

NewAgent enterprise-brain Manual NewAgent enterprise-brain Configuração Manual NewAgent enterprise-brain Configuração Este manual de uso irá ajudá-lo na utilização de todas as funções administrativas que a NewAgent possui e assim,

Leia mais

15. OLHA QUEM ESTÁ NA WEB!

15. OLHA QUEM ESTÁ NA WEB! 7 a e 8 a SÉRIES / ENSINO MÉDIO 15. OLHA QUEM ESTÁ NA WEB! Sua home page para publicar na Internet SOFTWARES NECESSÁRIOS: MICROSOFT WORD 2000 MICROSOFT PUBLISHER 2000 SOFTWARE OPCIONAL: INTERNET EXPLORER

Leia mais

4.14 - Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img

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

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Tabela de dados Tabelas para alinhar texto Tabelas para conter

Leia mais

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias SECOM MANUAL DO WARAM v. 1.5 Secretarias WARAM 1.5 Ferramenta de atualização do Portal da Prefeitura de São Paulo. Use preferencialmente o navegador Internet Explorer superior ou igual a 7.0. No campo

Leia mais

Manual da Administração do site Abrasel 2.0

Manual da Administração do site Abrasel 2.0 Manual da Administração do site Abrasel 2.0 Caro usuário, Você está recebendo o manual que lhe dará acesso ao administrador do site 2.0 onde será possível fazer as seguintes alterações: Inserir notícias

Leia mais

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

02 - Usando o SiteMaster - Informações importantes

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

4. Características Gerais das Tabelas do HTML

4. Características Gerais das Tabelas do HTML 4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

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

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

4.14 - Imagens: <IMG SRC="..."> SRC <IMG SRC="tecnologia.jpg"> único atributo que não pode ser omitido neste tag Nota: img

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

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

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

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

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

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

Leia mais

Introdução ao HTML Hypertext Markup Language

Introduçã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 mais

Manual de utilização do Portal Entrelace.org.br. William Oyama www.evisionbrasil.com.br

Manual de utilização do Portal Entrelace.org.br. William Oyama www.evisionbrasil.com.br Manual de utilização do Portal Entrelace.org.br William Oyama www.evisionbrasil.com.br Índice do tutorial 1 Portal entrelace.obr.br 2- Painel Administrativo 3- Informações Restritas 4- Acervo 5- Notícias

Leia mais

Tutorial do administrador do HelpCenterLive (Sistema de Ajuda)

Tutorial do administrador do HelpCenterLive (Sistema de Ajuda) Tutorial do administrador do HelpCenterLive (Sistema de Ajuda) Sumário Introdução...3 Entrar (Login)...3 Página Inicial (Home Page)...4 Ajuda...5 Conversação (Chat)...6 Mensagens Registradas...7 Registros...8

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

Manual do Instar Mail v2.0

Manual do Instar Mail v2.0 Manual do Instar Mail v2.0 Sumário Conteúdo Menu Principal... 2 Menu Cliente... 3 Pagina Categorias do Instar-Mail... 4 Importação... 4 Campanhas... 8 Cadastramento de campanhas do Instar-Mail... 9 Ações

Leia mais

MANUAL DO ANIMAIL 1.0.0.1142 Terti Software

MANUAL DO ANIMAIL 1.0.0.1142 Terti Software O Animail é um software para criar campanhas de envio de email (email Marketing). Você pode criar diversas campanhas para públicos diferenciados. Tela Principal do sistema Para melhor apresentar o sistema,

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

MANUAL DO INSTAR-MAIL 1.0. Pagina de login e senha do Instar-Mail

MANUAL DO INSTAR-MAIL 1.0. Pagina de login e senha do Instar-Mail 1º Passo: Acesse o seguinte endereço http://www.smtp.com.br/sg/cliente/logar.php MANUAL DO INSTAR-MAIL 1.0 2º Passo: Será apresentada uma tela solicitando o seu login e senha: Sendo assim: Digite o seu

Leia mais

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Compartilhamento de Arquivos no Google Drive Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Utilização do Google Grupos Introdução...

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

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

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais

Web Design Aula 11: Site na Web

Web Design Aula 11: Site na Web Web Design Aula 11: Site na Web Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Criar o site em HTML é interessante Do que adianta se até agora só eu posso vê-lo? Hora de publicar

Leia mais

Manual do Painel Administrativo

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

OFICINA BLOG DAS ESCOLAS

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

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web

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

Como incluir artigos:

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

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet

HTML: 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 mais

Como funciona? SUMÁRIO

Como funciona? SUMÁRIO SUMÁRIO 1. Introdução... 2 2. Benefícios e Vantagens... 2 3. Como utilizar?... 2 3.1. Criar Chave / Senha de Usuário... 2 3.2. Recursos da Barra Superior... 2 3.2.1. Opções... 3 3.2.1.1. Mover Para...

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

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

Links e Frames José Antônio da Cunha

Links e Frames José Antônio da Cunha Links e Frames José Antônio da Cunha Links Até agora, produzimos documentos simples. Mas os documentos de hipertexto têm como principal característica, fazer ligações com outros hipertextos. Os pontos

Leia mais

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes ALUNES MANUAL DO USUÁRIO Guia rápido Alunes 1 Manual de Instruções Versão 2.0 Alunes Informática 2 Sumário Introdução... 5 Pré-requisitos... 5 Principal/Home... 6 Como editar texto do home... 7 Desvendando

Leia mais

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

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

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

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip 1996 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/guia5.zip janeiro 1996 Tutorial - Autoria em World Wide Web Parte IV - Hypertext

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

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

Bem vindo ao ajuda do software QUICKFISH para criação de sites.

Bem vindo ao ajuda do software QUICKFISH para criação de sites. Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software

Leia mais

UFPel Departamento de Informática. Tutorial Google Docs. Profa. Lisane Brisolara de Brisolara

UFPel Departamento de Informática. Tutorial Google Docs. Profa. Lisane Brisolara de Brisolara UFPel Departamento de Informática Tutorial Google Docs Profa. Lisane Brisolara de Brisolara Sumário O que é o Google Docs Seus principais recursos Editor de textos/documentos Editor de planilhas eletrônicas

Leia mais

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova. 3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao

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

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar

Leia mais

Mozart de Melo Alves Júnior

Mozart de Melo Alves Júnior Mozart de Melo Alves Júnior WORD 2000 INTRODUÇÃO: O Word é um processador de texto com recursos de acentuação, formatação de parágrafo, estilo de letras diferentes, criação de tabelas, corretor ortográfico,

Leia mais

MANUAL WEBMAIL HORDE-V.01 IBILCE/UNESP

MANUAL WEBMAIL HORDE-V.01 IBILCE/UNESP MANUAL WEBMAIL HORDE-V.01 IBILCE/UNESP ÍNDICE 01 - COMO UTILIZAR SEU EMAIL...02 02 CONFIGURANDO PARA SEMPRE QUE ABRIR O EMAIL ABRIR A CAIXA DE ENTRADA...03 03 - COMO LER OS EMAILS...05 04 - COMO RETIRAR

Leia mais

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova. 3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao

Leia mais

ÍNDICE MANUAL SITE ADMINISTRÁVEL TV. 1. Introdução 2. Acessando o site administrável/webtv SITE ADMINISTRÁVEL 3. CONFIGURAÇÕES

ÍNDICE MANUAL SITE ADMINISTRÁVEL TV. 1. Introdução 2. Acessando o site administrável/webtv SITE ADMINISTRÁVEL 3. CONFIGURAÇÕES MANUAL SITE ADMINISTRÁVEL TV ÍNDICE 1. Introdução 2. Acessando o site administrável/webtv SITE ADMINISTRÁVEL 3. CONFIGURAÇÕES 3.1 - Dados Cadastrais 3.2 - Noticias 3.3 Redes Sociais 3.4 - Player 4. DESIGN

Leia mais

Sumário INTRODUÇÃO... 3. 1. Acesso ao Ambiente do Aluno... 4. 2. Ferramentas e Configurações... 5. 2.1 Ver Perfil... 5. 2.2 Modificar Perfil...

Sumário INTRODUÇÃO... 3. 1. Acesso ao Ambiente do Aluno... 4. 2. Ferramentas e Configurações... 5. 2.1 Ver Perfil... 5. 2.2 Modificar Perfil... Sumário INTRODUÇÃO... 3 1. Acesso ao Ambiente do Aluno... 4 2. Ferramentas e Configurações... 5 2.1 Ver Perfil... 5 2.2 Modificar Perfil... 6 2.3 Alterar Senha... 11 2.4 Mensagens... 11 2.4.1 Mandando

Leia mais

Manual das funcionalidades Webmail AASP

Manual das funcionalidades Webmail AASP Manual das funcionalidades Webmail AASP 1. Configurações iniciais 2. Regras 3. Histórico da conta 4. Autorresposta 5. Dados de acesso (alterando senha de acesso) 6. Identidade (assinatura) 7. Redirecionamento

Leia mais

Tutorial Administrativo (Backoffice)

Tutorial Administrativo (Backoffice) Manual - Software ENTRANDO NO SISTEMA BACKOFFICE Para entrar no sitema Backoffice, digite no seu navegador de internet o seguinte endereço: http://pesquisa.webbyapp.com/ Entre com o login e senha. Caso

Leia mais

Como criar uma página WEB

Como criar uma página WEB Como criar uma página WEB Utilização de comandos HTML Luís Manuel Borges Gouveia versão 1.1 Dezembro, 1996 Requisitos necessários para criar ou editar uma página Web um navegador (browser): Netscape ou

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

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo

Leia mais

Manual de Utilização do PLONE (Gerenciador de página pessoal)

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

Sumário. 1 Tutorial: Blogs no Clickideia

Sumário. 1 Tutorial: Blogs no Clickideia 1 Tutorial: Blogs no Clickideia Sumário Introdução... 2 Objetivos... 2 Instruções para utilização do Tutorial... 2 Acesso ao Portal e a Home Blog... 3 Página Inicial da área do Blog... 4 Apresentação da

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft Word 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Barra de Ferramentas de Acesso Rápido

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

CONCEITOS INICIAIS. Agenda A diferença entre páginas Web, Home Page e apresentação Web;

CONCEITOS INICIAIS. Agenda A diferença entre páginas Web, Home Page e apresentação Web; CONCEITOS INICIAIS Agenda A diferença entre páginas Web, Home Page e apresentação Web; O que é necessário para se criar páginas para a Web; Navegadores; O que é site, Host, Provedor e Servidor Web; Protocolos.

Leia mais

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :

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

Word 1 - Introdução 1.1 - Principais recursos do word 1.2 - A janela de documento 1.3 - Tela principal

Word 1 - Introdução 1.1 - Principais recursos do word 1.2 - A janela de documento 1.3 - Tela principal Word 1 - Introdução O Word para Windows ou NT, é um processador de textos cuja finalidade é a de nos ajudar a trabalhar de maneira mais eficiente tanto na elaboração de documentos simples, quanto naqueles

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

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

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida).

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida). XHTML 1. Significado do Termo HTML (HyperText Markup Language Linguagem de Marcação de Hipertexto) é a linguagem na qual são feitas as páginas que irão compor um site da Internet. A versão mais recente

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

Tutorial Campus Online Gerenciando Conteúdo (Textos)

Tutorial Campus Online Gerenciando Conteúdo (Textos) Tutorial Campus Online Gerenciando Conteúdo (Textos) Para a gerência de conteúdo no site do Campus Online, é utilizado um componente do Joomla, o K2. Este componente permite que o conteúdo seja gerenciado

Leia mais

Construtor de sites SoftPixel GUIA RÁPIDO - 1 -

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

Omega Tecnologia Manual Omega Hosting

Omega Tecnologia Manual Omega Hosting Omega Tecnologia Manual Omega Hosting 1 2 Índice Sobre o Omega Hosting... 3 1 Primeiro Acesso... 4 2 Tela Inicial...5 2.1 Área de menu... 5 2.2 Área de navegação... 7 3 Itens do painel de Controle... 8

Leia mais

Índice. Manual de uso do Wordpress Produção de conteúdo. 1) Acesso ao Painel de Controle. 2) Ambientação na Ferramenta. 3) Inserir novo Post

Índice. Manual de uso do Wordpress Produção de conteúdo. 1) Acesso ao Painel de Controle. 2) Ambientação na Ferramenta. 3) Inserir novo Post Índice 1) Acesso ao Painel de Controle 2) Ambientação na Ferramenta 2.1) Posts 2.1.1) Adicionar novo post 2.1.2) Editar posts 2.2) Mídia 2.2.1) Tipos de Mídia 2.2.2) Biblioteca 2.2.3) Adicionar novo 3)

Leia mais