O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo:

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

Download "O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo:"

Transcrição

1 HTML é a sigla usada para Hyper Text Markup Language (linguagem de Marcação de Hipertexto). É a linguagem destinada a criação de páginas para a WEB. Ao contrário do que muita gente boa pensa, HTML não é uma linguagem de programação, não sendo necessário nenhum conhecimento anterior de programação. A organização que cuida da especificação e padronização da linguagem HTML é a World Wide Web Consortium (W3C). Uma página HTML pode ter um desvio para um outro ponto do mesmo documento. Um link pode ser palavras, textos e até uma imagem. As páginas WEB podem ser usadas para interagir com tecnologias como ASP, PERL, JAVA SCRIPT, etc. Usaremos como editor de nossas páginas, o visualizador Microsoft Visual Interdev 6.0; podemos utilizar vários outros como o Front Page e até mesmo o Bloco de Notas. Para comerçarmos a construi uma página HTML, devemos observar a seguinte condição inicial em qualquer página(excetuando-se a linha 3): 1

2 Todos os tag s e atributos, excetuando-se o título da página fica dentro da área de influência de <body> </body>. O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo: <div><h1>veja como terei que fechar o ultimo primeiro</h1></div> Os tags <HEAD> e </HEAD> definem o cabeçalho de uma aplicação em HTML. <TITLE> e </TITLE> definem o título da página, que aparecerá na barra de tarefas. Tamanho dos cabeçalhos -> O tamanho das letras em HTML varia de seis níveis (de <h1> até <h6>, com seus tags de fechamento); assim, para aumentar ou diminuir o tamanho de uma letra em HTML, devemos proceder da seguinte forma: <h1>insira seu texto aqui </h1> h1 é o maior nível, diminuindo até h6. Opções de Formatação de Texto <b> e </b> - > negrito <I> e </I> -> itálico <br> -> insere uma quebra de linha no texto para colocar linhas em branco, basta colocar o tag <br> seguidos. <hr> -> coloca uma linha horizontal no texto. Atributos do tag <hr>: è ALIGN: alinha a linha. Valores: left, center, right. è SIZE: espessura da linha. è WIDTH: largura da linha, em porcentagem. Exemplo de sintaxe <hr align= center widht= 35% > <div> e </div> -> formata o texto em blocos distintos. O tag <div> possui as seguintes opções de formatação: left, right ou justify. Exemplo: <div align= center > texto pre-formatado </div> <p> -> áreas de parágrafos no texto. Esse tag insere um espaço vertical entre as tag s. 2

3 Possui um atributo align para alinhar um texto: center, left, right ou justify. Opções de formatação <u> e </u> - > sublinha um texto (underline). <sub> e </sub> -> subscreve um texto. <sup> e </sup> -> coloca um texto em sobrescrito. <s> e </s> - > coloca o texto cortado (strike through). <pre> e </pre> -> coloca o texto pré-formatado usado na formatação, geralmente usando a fonte courier new. Usa-se geralmente quando é necessário a formatação do texto. Comentários-> Sintaxe: <!-- coloque aqui seu comentário --> A seguinte tela de código: Gerou como resultado: 3

4 Listas Existem três tipos de listas em HTML: è listas não ordenadas: apresenta os itens que a compões sem enumerá-las. è Listas ordenadas: atribuem números em seqüências dos itens de cada item da lista. è Listas de definição: sem nenhum tipo de marcação, identa uma ou mais definições para cada item da lista. Listas não-ordenadas: o tag <UL> define o início de uma lista não ordenada. Pode-se alterar o tipo de marcador de uma lista não-ordenada através do atributo TYPE <UL TYPE= circle > : circulo vazado <UL TYPE= disc > : círculo cheio <UL TYPE= square : quadrado o tag <OL> define o início de uma lista ordenada. Pode-se modificar a seqüência e o tipo de numeração através dos atributos START e TYPE. 4

5 O atributo START define o ponto onde a lista se iniciará. Exemplo: <OL START= 5 > O atributo TYPE indica que tipo de seqüência iremos usar. Letras, números ou algarismos romanos. <ol type= a > letras minúsculas <ol type= A > letras maiúsculas <ol type= i > algarismos romanos minúsculos <ol type= I > algarismos romanos maiúsculos <ol type= 1 > números As listas de definição são utilizadas quando se deseja identar um texto quando necessário. O tag <dl> inicia uma lista de definição. O tag <dt> indica o item da lista. O tag <dd> indica a descrição para cada item da lista. O seguinte código Gerou a seguinte saída: 5

6 Imagens São arquivos separados das páginas HTML. Na página existe apenas uma refência das páginas dos arquivos de imagem e o browser se encarrega de buscá-las e exibi-las. Só é permitido usar imagens.jpg(jpeg) ou.gif nas páginas HTML. Deve-se usar letras minúsculas, sem espaço e sem acento, para evitar erros em diferentes sistemas operacionais. O arquivos.jpeg tem nível de compressão máxima. O tag <IMG> é usado para inserir uma imagem na página. O atributo SRC indica a path do arquivo de imagem. O atributo ALT serve para exibir um texto enquanto a imagem está sendo carregada, ou quando não puder ter sido exibido por motivos técnicos. Toda imagem possui um valor para seu comprimento e largura. Os browser calculam esse valor automaticamente, mas podemos informá-lo para dar mais rapidez ao carregamento da pagina. Assim, o browser pode montar esse página e exibi-la antes do carregamento da imagem. 6

7 Os valores de altura e largura de uma imagem são HEIGHT e WIDTH. Os valores são em pixels. A sintaxe ficaria então: <IMG SRC= lg.gif HEIGHT=100 WIDTH=150> Com essa técnica podemos distorcer uma imagem ou comprimi-la. O atributo ALIGN alinha uma imagem de acordo possíveis os seguintes valores: Left => alinha a imagem a esquerda; Rigth => alinha a imagem a direita; MIDDLE => alinha a imagem no centro do texto; TOP => alinha a imagem no topo do texto; BOTTOM => alinha a imagem na base do texto. com o texto; são Para um alinhamento horizontal ou vertical, sem a interferência do texto subseqüente, usa-se o tag <div> O atributo <border> exibe uma borda ao redor da imagem, seus valores variam de 1 a 7 <img src= lg.gif border= 1 > Tempo de carga da Imagem -> Cores escuras com fontes escuras, letras pequenas e cores berrantes podem causar confusão. Deve haver harmonia entre as cores das fontes e das páginas. Tag <BASEFONT> -> DETERMINA O TAMANHO PADRÃO PARA A FONTE DA PÁGINA. Pode ser usado em qualquer parte da página, mas é geralmente definido no cabeçalho da página HTML entre os tag s <head> e </head>. Os valores permitidos para os valor 3 é o valor padrão. atributos SIZE variam de 1 a 7. O <BASEFONT SIZE= 4 > Existem peculiaridades do Internet Explores que permitem definir no tag basefont a família da fonte (Arial, Verdana, etc.) e a cor da fonte. O tag <font> permite personalizar o tamanho da fonte, o tipo e a cor de uma fonte em um determinado trecho da página. Atributos do tag <font>: Size -> Tamanho da fonte (1 7); 7

8 Face -> Tipo de fonte (Arial, Verdana, etc.) Color -> Nome ou valor do RGB que determina a cor. Tag <nobr> -> evita a quebra de linha automática do browser. BGCOLOR -> Define a cor de fundo. É um atributo do tag <BODY> <BODY BGCOLOR= yellow > aqua, black, fuchsia, gray, green, lime, marrom, navy, olive, purple, red, silver, teal, yellow, white. Atributo BGBACKGROUND -> Usado para definir qual imagem irá compor o fundo de tela. Sintaxe: <BODY BGCOLOR= image.gif BGPROPERTIES= fixed > Atributo TEXT -> altera a cor padrão do texto. Em geral acompanham a declaração <BODY>. <FONT> -> alteram a cor padrão de parte do texto. Atributo Link, vlink, e alink São atributos usados para alterar a cor de um link de uma página. LINK -> determina a cor do link que não foram ativados. VLINK -> determina a cor dos links que já foram ativados. ALINK -> determina a cor do link no momento em que este já foi processado. <body link= red alink= blue vlink= green > CORES NO HTML O html possui TAGs que tem o atributo COLOR usado para definir uma cor, que pode ser do texto, do fundo de página, link, etc. Os nomes das cores padrão são: Aqua gray navy silver black green Black green olive teal blue lime Purple yellow fuchsia marron red white Cores em Hexadecimal -> Além de escolher uma cor pelo seu nome, podemos fazê-lo pelo seu valor hexadecimal no padrão RGB. São atribuídos valores para Red(vermelho), Green(verde) e Blue(Azul.). Os valores hexadecimal para o RGB variam de 00 a FF. 8

9 Por exemplo: - FF0000 é o vermelho - 00FF00 é o Verde FF é o Azul As variações destes valores é que vão determinar a cor exata. Para usar esse método, temos que indicar que estamos usando cores em hexadecimal. Indicamos isso no próprio atributo colocando o caracter # antes do valor hexadecimal da cor. <FONT COLOR= #FFC9DF > Inserindo Som Para inserirmos som no Internet Explores utilizamos o tag <BGSOUND>. O atributo SRC indica qual arquivo de áudio será reproduzido. O atribulo LOOP indica quantas vezes a reprodução do arquivo se repetirá. <BGSOUND SRC= som.wav LOOP= 2 > para inserirmos som no Netscape utilizamos o TAG <EMBED>. Ferramentas de Busca As ferramentas de busca são sites na Web que tem por objetivo catalogar home-pages. Permite que o usuário procure por palavras, frases ou assuntos de seu interesse. Podemos cadastrar nosso site em uma ferramenta de busca para que nosso site seja incluído na base de dados dela. São exemplos de ferramentas de busca: ] Altavista Yahoo Lycos Cadê Miner Usando o TAG <META> 9

10 É possível controlar como a página vai ser catalogada utilizando o TAG <META>. O tag <META> permite informar quais palavras-chave e descrição deve ser utilizadas pela ferramenta de busca. O tag <META> fica dentro da área de influência do TAG <HEAD>. Os atributos NAME pode conter os valores description (descrição) e keywords(palavras-chave). Ex.: <META name= keywords content= Internet, intranet, cursos, treinamento, WEB, WWW > O tag <META> também é utilizado para recarregar automaticamente a página em um intervalo pré-estabelecido de segundos. O atributo HTTP-EQUIV deve ter o valor refresh. CONTENT é usado para estabelecer o intervalo em segundos. Exemplo <META HTTP-EQUIV= refresh CONTENT= 10 ; URL= pagina.htm > O parâmetro URL é usado para indicar qual página será carregada no intervalo. Entidades de Caracteres Existem caracteres que não podem ser obtidos através do teclado. Esses caracteres podem ser obtidos através de uma codificação especial que o browser é capaz de interpretar. Existem dois tipos de entidades: a do html e a do ISO-Latin1. A Iso-latin1 usa um código composto pelo caracter & seguido do símbolo #. O HTML usa o caracter # seguido de uma combinação de letras. Ex. Caracter < - > < > -> > Caracteres em Branco O html entende e respeita um único espaço em branco, com separador de palavras em um texto. Caso seja necessário inserir mais de um espaço em branco entre palavras, devemos usar o caractere especial Acentuação 10

11 Alguns países não possuem acentos. Com isso, o uso de acentos pode causar algum transtorno aos usuários que não possuem suporte à nossa língua. As entidades cedilha possuem a seguinte forma: ç e o atil possui a seguinte forma ã Com isso, garantimos que nossa acentuação deverá ser vista em qualquer parte do mundo. Tabelas As tabelas do html têm a estrutura parecidas com as tabelas feitas em processadores de texto ou por planilhas eletrônicas. Uma tabela é composta por linhas e colunas. As intercessões das linhas e das colunas formam as células da tabela. As céluilas de uma tabela html podem conter um texto simples, um link ou uma imagem, etc. O html pode controlar a formatação da tabela: borda, alinhamento, espaço entre as células, tamanho, altura, etc. Uma tabela é criada usando os TAGs <TABLE> e </TABLE>. Nas áreas de influência desses tags estrarão as tags responsáveis pela criação de linhas e células. Como padrão, a tabela é criada sem bordas. O TAG <tr> é utilizado para criar linhas em uma tabela. Toda a linha de uma tabela possui uma ou mais células. Não há limites para a quantidade de linhas que podem ser criadas em uma tabela. O TAG <TD> é usado para criar células em uma tabela. Exemplo: <TABLE> <TR> <TD> Linha1xCélula1 </TD> <TD> Linha1xCélula2 </TD> </TR> </TABLE> 11

12 Atributos de TABLE -> WIDTH é utilizado para definir a largura da tabela em pixels ou porcentagem da largura do documento. <TABLE WIDTH=80%> -> BORDER é utilizado para exibir bordas na tabela. Pode assumir os valores a partir de zero(sem borda) e reflete o número de pixels da borda. <TABLE BORDER= 2> -> CELLSPACING é usado para inserir uma quantidade de espaço, em pixels, entre a célula da tabela. <TABLE CELLSPACING=15> -> CELLPADING é usado para inserir uma quantidade de espaço, em pixels, entre as bordas da célula e seu conteúdo. <TABLE CELLPADING=2> -> BGCOLOR é utilizado para definir a cor de fundo da tabela. <TABLE BGCOLOR= ff0010 > -> BACKGROUND é usada para definir a imagem de fundo da tabela. <TABLE BACKGROUND= exemplo.gif > -> ALIGN é usado para alinhar a tabela em relação ao resto do documento. Funciona de maneira semelhante ao atributo ALIGN do tag IMG. -> Pode assumir os valores left, right ou center. <TABLE ALIGN= center > Atributos de TR ALIGN é usado para definir o alinhamento das células de uma linha. Pode ter os valores left, right, center. VALIGN é usado para definir o alinhamento vertical das células de uma linha. Pode ter os valores top, bottom, e middle. <TR ALIGN= top > BGCOLOR é usado para definir uma cor de fundo para uma linha da tabela. <TR BGCOLOR= blue > Atributos de TD ALIGN é usado para definir o alinhamento das células. Pode ter os valores left, right, center. <TD ALIGN= right > VALIGN é usado para definir o alinhamento vertical das células. Pode ter os valores top, bottom, e middle. <TD ALIGN= top > WIDTH é usado para definir a largura de uma célula em pixels ou a percentagem da largura total da tabela. <TD WIDHT=50> 12

13 HEIGHT é usado para definir a altura da célula, sempre em pixels. <TD HEIGHT=15> URL e Links Uma URL (Uniform Resource Location) é usada para especificar a localização de uma página na WEB. É montada da seguinte maneira: Protocolo://servidor/página Ex.: Em alguns casos o nome da página pode ser omitido. Alguns dos protocolos usados na URL: ftp:// news:// telnet:// file:// para servidores da WEB. para servidores de transferência de arquivos para servidores de grupos de discussão para acessar um servidor para abrir páginas localmente Os hiperlinks (lins) são desvios usados para guiar a navegação de um site da WEB. Quando um hyperlink é acionado, uma ação é realizada: um desvio para outra página, o envio de um mail, etc. Sintaxe de um link: è O Tag <A> é usado para definir um link è O atribulo HREF é usado para definir o destino do link è A frase ou texto que servirá de link fica entre o <A> e o fechamento </A> è O Tag de fechamento é obrigatório <A HREF= Link para a DBA Engenharia de Sistemas </a> Tipos de Links - Links para a WEB; - Links para outras páginas dentro do mesmo site; - Links para pontos na mesma página(links internos); 13

14 - Links de ; - Links para scripts; Links para a WEB Os links para a WEB são muito comuns. Devemos colocar a URL completa, incluindo o protocolo ( <A HREF= > DBA Engenharia de Sistemas> </a> Links para dentro do Site Esse tipo de link permite que outra página dentro do site seja carregada. Um site é formado por várias páginas. É através deste tipo de link que as ligamos. Os diretórios também fazem parte do nome, se necessária, dentro do caminho especificado por HREF. <A HREF= pagina2.html > Página</a> Links internos Esse tipo de link permite que uma página seja dividida em seções e cada seção possua uma marca de destino. Através do atributo NAME criamos essas marcas. <A NAME= cap1sec1 > Após marcar o texto em todas as posições desejadas usando <A HREF= #alvo > podemos fazer referência a essas marcações usando: <A HREF= #alvo > Link </A> O caracter # é usado para indicar que o link é interno. Logo após o caracter # aparece o destino do link (posição dentro da página). Links de correio eletrônico O TAG <A> permite que seja ativado o envio de mensagens eletrônicas pelo programa de correio associado ao browser. Usamos o atributo HREF com a referência ao protocolo de envio de MAILTO: Esse modo de enviar mensagens é muito difundida na Web. 14

15 <A HREF= mailto: > Tutorial de Web </a> Navegabilidade É muito importante a navegabilidade de um site. Quando um site não possui boa navegabilidade, geralmente ficamos perdidos sem saber como avançar ou como voltar. É importante sempre existir uma integração entre as páginas de um site. Links para a página principal e para os tópicos mais importantes sempre são de grande utilidade. Quando a navegação por um documento for extensa, coloque links para a página anterior, próxima página e página índice, fazendo um encadeamento das páginas. Desse modo, evitamos que os usuários fiquem perdidos. Muitos sites possuem um link para uma seção chamada Mapa do Site ou Sitemap. Essa seção permite que o usuário possa saber como está dividido o site e assim ter uma navegação melhor pelas páginas. Applets Um applet é um programa em Java executando dentro de uma página HTML. Esse programa é multi-plataforma, ou seja, um applet é um programa que pode ser executado em qualquer browser que suporte Java em qualquer sistema operacional. Os applets em Java ainda são muito lentos na sua execução, pois eles são interpretados pelo browser antes da sua execução. Outro problema é a instabilidade do applet; muitas das vezes o computador fica lento e o browser trava durante sua execução. Use applet somente quando necessário. A linguagem Java é bastante complexa. É uma linguagem de programação parecida com C++ em sua sintaxe. Os applets são formados por mais de um arquivo chamados classes. esses arquivos possuem a extensão.class e eles que são responsáveis pela execução do applet dentro da página. Elas contém todas as informações necessárias para o applet funcionar. INSERINDO APPLET 15

16 è O TAG <APPLET> é usado para inserir um programa Java na página. è O atributo CODE indica qual o arquivo.class será executado dentro da página. è O atributo CODEBASE indica onde o arquivo.class está localizado. Pode ser referência a uma URL ou ao diretório onde o arquivo.class está localizado. Caso seja omitido será considerada a URL da página. è O atributo WIDTH indica a largura em pixels do applet. è O atributo HEIGHT indica a altura em pixels do applet. Exemplo de applet em uma página: <APPLET CODE= applet.class WIDTH=100 HEIGHT=100> è O tag <PARAM> é usado para passar informações complementares (parâmetros) para o applet. è Esse tag somente é usado quando o applet necessita de parâmetros. è O atributo NAME indica o nome do parâmetro. è O atributo VALUE indica o valor do parâmetro. Exemplo: <APPLET CODE= applet.class WIDTH=100 HEIGHT=100> <PARAM NAME= texto VALUE= curso de HTML > <PARAM NAME= cor VALUE= blue > <PARAM NAME= fonte VALUE= helvetica > </APPLET> Frames É um recurso utilizado para dividir a janela do browser em partes diversas. Cada uma dessas páginas do frame pode ser manipulada individualmente. Cada frame pode conter um documento diferente, ou seja, as frames funcionam como página HTML juntas em uma mesma janela. Isso ajuda a organizar a navegação no site. Documentos de Layout -> as divisões das frames são feitas em páginas (documentos de layout) que contém as informações sobre as estruturas dos documentos (linhas e colunas). Os documentos de conteúdo são páginas HTML que serão apresentadas por cada frame. O tag <FRAMESET> é responsável pela divisão da página em frames que podem ser linhas ou colunas. 16

17 Dentro da área de influência do tag <FRAMESET> e </FRAMESET> existem os elementos que definem o conteúdo de cada frame ou outras definições do <FRAMESET> (encadeamento). O atributo ROWS é usado para dividir a janela em frames horizontais (linhas). Pode haver mais de uma linha definida por esse atributo. Os valores de ROWS podem ser em pixels, valores percentuais ou relativamente uns aos outros. <FRAMESET ROWS= 30%,* > <FRAMESET ROWS= 30%,40%,* > o atributo COLS é usado para dividir as frames verticalmente (colunas). Podem haver mais de um atributo definido por essa coluna. <FRAMESET COLS= 40%,* > o tag <FRAME> é usado para definir o conteúdo (página) será usado para carregar o frame. É usado na área de influência do TAG <FRAMSET> <FRAME SRC= doc1.html NAME= frm01 > o atributo SRC define o nome do documento (página) que será carregado na FRAME. O atributo NAME associa um nome a uma frame. O nome da frame é importante pois através dele conseguiremos referenciá-lo por um link. O atributo NORESIZE impede que o usuário altere o tamanho da frame. Alguns browser não entendem frames. São eles: - Internet Explorer Netscape Mosaic Opera 2.1 O atributo <NOFRAME> é usado para exibir mensagens que será interpretada somente pelos browsers que não suportam o uso de frames. <NOFRAME> Desculpe, seu site nao suporta frame </NOFRAME> <HTML> <HEAD> 17

18 <TITLE> FRAMES LAB </TITLE> <FRAMESET ROWS= 50%,* > <FRAME NAME= frm1 SRC= labfrm_doc1.html > <FRAMESET COLS= 74%,* > <FRAME NAME= frm2 SRC= labfrm_doc2.html > <FRAME NAME= frm3 SRC= labfrm_doc3.html > </FRAMESET> </FRAMESET> </HEAD> </HTML> Links entre frames -> como um documento de conteúdo pode ser uma página HTML comum, pode também possuir links. Podemos carregar esses links na própria frame ou em uma frame qualquer. Por isso se faz necessário que um frame possua um nome, associado ao atributo NAME, que o identifique de forma única. Links entre os Frames: no documento de conteúdo, será escrito um link usando um novo atributo TARGET que identifica o nome da frame onde o link será exibido. <A HREF= pagina.html TARGET= frm01 > Saindo de um Frame -> Todo o link em um documento de conteúdo será carregado em uma outra frame caso o atributo TARGET esteja presente. Se o atributo não estiver presente o link será carregado na mesma frame. Dessa forma ficamos presos dentro das frames. O atributo TARGET possui um valor especial para que possamos finalizar o uso das frames. O valor _top elimina as frames que estão sendo exibidas, carregando um link em uma janela inteira. Esse valor deve ser escrito em letras minúsculas. <A HREF= pag.html TARGET= _top > Abrindo outra janela do Browser Podemos carregar um link em uma nova janela do browser as invés de carregá-la na mesma janela. 18

19 Ao colocarmos um valor inexistente no atributo TARGET, o browser irá abrir uma nova janela deixando as janelas das frames intacta. <A HREF= pag.html TARGET= xpto > Frames Disfarçadas Podemos apresentar frames sem bordas, definir a largura e a altura de uma frame e excluir as barras de rolagem. Para isso é preciso usar uns atributos que influenciam as frames. Atributos: FRAMEBORDER -> pode assumir dois valores: 0 (esconde as bordas) ou 1 (exibe as bordas). Esse é um atributo do tag <FRAMESET>. Se o atributo não for informado, as bordas irão aparecer. FRAMESPACING altera o espaçamento entre as frames. Seu valor é definido em pixels. Esse é um atributo do tag <FRAMESET>. O atributo MARGINWIDTH estabelece um valor para as margens direita e esquerda frame. O atributo MARGINHEIGHT estabelece um valor para a margem superior da frame. <FRAME SRC= pag.htm MARGINHEIGHT=35 MARGINWIDTH=50> Esses são atributos do TAG <FRAME>. O atributo SCROLLING define a presença, ausência ou atribuição automatica pelo browser das barras de rolagem. Seu valor pode ser YES, NO ou AUTO. <FRAME SRC= pag.htm NAME= frm3 SCROLLING= YES > Atributo do TAG <FRAME>. Formulários Os formulários permite a interação do usuário com a aplicação server-side. É através de formulários que iniciamos pesquisas em base de dados como o altavista. Os formulários permitem que informações diversas, como dados pessoais, sejam enviados para banco de dados. Geralmente, um formulário é usado para executar um SCRIPT(PERL, ASP, etc.) no servidor, que irá processar as informações enviadas. 19

20 O tag <FORM> é usado para criar uma área de página onde serão inseridos elementos do formulário. Os elementos de um formulário são os campos usados para captar e enviar informações. O atributo ACTION indica a localização URL do script ou programa que será executado para processar os dados enviados pelo formulário. <FORM ACTION = > Esse comando executa o programa script do diretório /cgi-bin do servidor infnet. O atributo METHOD indica o formato no qual os dados serão enviados para o servidor. Esse atributo pode possui os valores GET ou POST. Os elementos de um formulário deve ficar entre a área de influência do TAG <FORM>. É através desses elementos que o formulário tomará forma, exibindo campos de texto, lista de seleção, caixa de diálogo e botões. Os TAG <INPUT>, <SELECT> e <TEXTAREA> e seus atributos são responsáveis por essa formatação. Elementos de um Formulário Esses elementos tem em comum alguns atributos importantes. O atributo NAME indica o nome do campo usado pelo script para recuperação do valor digitado pelo usuário. O atributo VALUE permite que seja inserido um valor padrão para o campo. O tag <INPUT> é usado para exibir a caixa de texto, enviar um valor oculto em uma página, botões, elementos de múltipla escolha, etc. Este tag não possui fechamento. O valor do atributo TYPE indica qual tipo de texto será exibido. O atributo SIZE indica o tamanho, em caracteres, que o campo texto terá. O atributo MAXLENGHT indica o número de caracteres que poderão ser digitados em um campo de texto. Esse atributo só deve ser digitado quando o atributo TYPE for text, password ou hidden. Atributo TYPE= password, substitui o texto por * <IMPUT TYPE= password SIZE=7 NAME= senha > Campos Ocultos -> permite passar um valor para o script. Esse valor não é exibido na página. Os atributos NAME e VALUE devem ser informados. Atributo TYPE= hidden Elementos Checkbox Atributo TYPE= checkbox permite escolher uma entre várias opções. 20

21 Se for usado o atributo CHECKED, a caixa já aparecerá ativada. <IMPUT TYPE= checkbox NAME= opcao VALUE= on CHECKED> O atributo TYPE= radio Permite escolher uma única opção em uma página. Uma das opções também pode receber o atributo CHECKED. Botão de Envio > o atributo TYPE= submit envia os dados para o servidor, usando o endereço do atributo ACTION do tag <FORM>. <IMPUT ACTION= submit VALUE = Enviar > Botão Reset -> Retorna os valores default do formulário. <IMPUT TYPE= reset VALUE= apagar > Botão de Imagem -> Permite que uma imagem seja usada no lugar de um botão de envio. <INPUT TYPE= image SRC= envio.gif > Elemento TEXTAREA -> o tag <TEXTAREA> cria uma área de digitação de várias linhas de texto em uma página. O atributo COLS define a quantidade de colunas dessa área. O atributo ROWS define a quantidade de linhas da área. Esse tag possui fechamento. <TEXT AREA NAME= OBS ROWS=10 COLS=50> Esta é uma área de texto </TEXTAREA> Menus Pull-Down -> São caixas de seleção onde podemos optar por um dos valores da lista. O tag <SELECT> é utilizado para criar menus pull-down. O tag <OPTION> são usados para definir os itens da lista. O tag <SELECT> possui fechamento. O atributo size define o número de opções que serão exibidas simultaneamente. Se o atributo MULTIPLE for informado, o tag select permitirá que mais de um item seja selecionado. O atributo NAME identifica o nome do objeto que será usado pelo script para envio de informações selecionadas. Ex.: <SELECT NAME= UF SIZE= 1 MULTIPLE> <OPTION VALUE= RJ > Rio de Janeiro <OPTION VALUE= SP > São Paulo </SELECT> 21

22 Tag <OPTION> -> deve ser usado dentro da área de influência do tag <SELECT> para definir as opções disponíveis ao usuário. O atributo VALUE define a opção que será enviada ao script, caso seja selecionada. O atributo SELECTED delimita qual a opção será selecionada como default. 22

23 Tutorial de HTML Agosto de

24 Introdução Bem-vindos ao mundo HTML, com a ajuda desse hipertexto, você será capaz de construir home-pages. A função desse tutorial é puramente acadêmica; tentar ajudar pessoas experientes, intermediárias ou leigas a desenvolver boas aplicações com o HTML. Futuramente estaremos colocando um tutorial sobre Java Script a fim de que você possa melhoras sua técnica. Espero que você se divirta bastante ao fazer páginas HTML. Vale lembrar que para isso somente é preciso um browser (Netscape, Internet Explorer, Pegasus, etc.) e o seu Notepad do Windows. Basta salva no notepad com extensão.htm ou.html e acessar o caminho pelo browser. Sugestões, dúvidas e reclamações favor enviar um para: sam@gbl.com.br 24

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

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

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

Leia mais

Ferramentas para Multimídia e Internet - 1486

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

Leia mais

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

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

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

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

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

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

> 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

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

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

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

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

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

6.2 - Formulários: form <form action="url_de_script" method="método">...</form> form action method POST GET exceto outros formulários form

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

Leia mais

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

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

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

Leia mais

Introdução ao HTML 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

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

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

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

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

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

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃ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 mais

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

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

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

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

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

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

Claudio Damasceno. Avançar

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

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES FRAMES. Professor Carlos Muniz

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES FRAMES. Professor Carlos Muniz INTRODUCAO DESENVOLVIMENTO E DESIGN DE FRAMES Algumas páginas da internet são congeladas em seu cabeçalho ou em seu lado esquerdo, para construção de menus que geralmente precisam estar disponíveis para

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

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

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

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz INTRODUCAO DESENVOLVIMENTO E DESIGN DE INTRODUÇÃO INTRODUÇÃO A linguagem HTML (Hipertext Markup Language Linguagem de Marcação de Hipertexto) é usada para divulgar páginas na World Wide Web, o serviço

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

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 Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas

Leia mais

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).

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

Leia mais

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

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

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

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

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

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

Leia mais

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

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira

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

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

Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br)

Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Introdução A HyperText Markup Language e a Web No núcleo de toda página da Web, encontramos a HyperText Markup

Leia mais

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

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

Leia mais

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

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

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),

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

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

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

HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto

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

Leia mais

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

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 - HTML Básico: 4.2 - Criando documentos HTML:

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

Leia mais

Scriptlets e Formulários

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

Leia mais

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

André Kawamoto NE31A

André Kawamoto NE31A André Kawamoto NE31A Internet Internet: uma coleção de redes Todos os computadores conectados à Internet fazem parte de uma rede (rede local, rede doméstica) Rede de Redes Internet x WWW Internet e World

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

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

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

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

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

Leia mais

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras

Leia mais

HyperText Markup Language HTML

HyperText Markup Language HTML HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

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

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

Prof.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML

Prof.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML Prof.: Melba Lima Gorza Aula Introdutória de HTML Componentes do HTML Estrutura de um documento XHTML primeiro Documento XHTML meu primeiro documento XHTML

Leia mais

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

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

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

Leia mais

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

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

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

Leia mais

Programação de Servidores CST Redes de Computadores

Programação de Servidores CST Redes de Computadores Programação de Servidores CST Redes de Computadores Marx Gomes Van der Linden http://marx.vanderlinden.com.br ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) HMTL Arquivo-texto

Leia mais

Programando em PHP. Conceitos Básicos

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

Leia mais

Serviço Técnico de Informática. Curso Básico de PowerPoint

Serviço Técnico de Informática. Curso Básico de PowerPoint Serviço Técnico de Informática Curso Básico de PowerPoint Instrutor: Tiago Souza e Silva de Moura Maio/2005 O Microsoft PowerPoint No Microsoft PowerPoint, você cria sua apresentação usando apenas um arquivo

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

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

Programação e Designer para WEB

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

Status. Barra de Título. Barra de Menu. Barra de. Ferramentas Padrão. Caixa de nomes. Barra de. Ferramentas de Formatação. Indicadores de Coluna

Status. Barra de Título. Barra de Menu. Barra de. Ferramentas Padrão. Caixa de nomes. Barra de. Ferramentas de Formatação. Indicadores de Coluna O que é uma planilha eletrônica? É um aplicativo que oferece recursos para manipular dados organizados em tabelas. A partir deles pode-se gerar gráficos facilitando a análise e interpretação dos dados

Leia mais

3 HTML Tabelas, frames e formulário

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

Leia mais

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

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção Este procedimento corresponde ao fluxo de trabalho de Indexação de OCR com separação de código de correção no programa de treinamento do Capture Pro Software. As etapas do procedimento encontram-se na

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

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

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

Leia mais

1. Introdução pág.3 2. Apresentação do sistema Joomla! pág.4 3. Acessando a administração do site pág.4 4. Artigos 4.1. Criando um Artigo 4.2.

1. Introdução pág.3 2. Apresentação do sistema Joomla! pág.4 3. Acessando a administração do site pág.4 4. Artigos 4.1. Criando um Artigo 4.2. 1. Introdução pág.3 2. Apresentação do sistema Joomla! pág.4 3. Acessando a administração do site pág.4 4. Artigos 4.1. Criando um Artigo 4.2. Editando um Artigo 4.3. Excluindo um Artigo 4.4. Publicar

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

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10 HTML Sessão 10 HTML HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere

Leia mais

72ABC - 2 Bimestre. Check-list para Prova Bimestral. 01 - Criar uma versão do site do primeiro bimestre em HTML.

72ABC - 2 Bimestre. Check-list para Prova Bimestral. 01 - Criar uma versão do site do primeiro bimestre em HTML. 72ABC - 2 Bimestre Check-list para Prova Bimestral 01 - Criar uma versão do site do primeiro bimestre em HTML. 02 Serão desenvolvidas as mesmas páginas já feitas, mas em versão HTML. A seguir, um exemplo

Leia mais

USANDO O ROUNDCUBE WEBMAIL

USANDO O ROUNDCUBE WEBMAIL USANDO O ROUNDCUBE WEBMAIL ATENÇÃO! Para utilizar este tutorial não se esqueça: Onde estiver escrito seusite.com.br substitua pelo ENDEREÇO do seu site (domínio). Ex.: Se o endereço do seu site é casadecarnessilva.net

Leia mais

Internet. Prof. Ricardo Argenton Ramos. www.univasf.ed.br/~ricardo.aramos

Internet. Prof. Ricardo Argenton Ramos. www.univasf.ed.br/~ricardo.aramos Internet Prof. Ricardo Argenton Ramos www.univasf.ed.br/~ricardo.aramos O que é Internet? A Internet é uma rede capaz de interligar todos os computadores do mundo. O que faz a Internet tão poderosa assim

Leia mais