Treinamento em HTML. Índice
|
|
|
- Larissa de Escobar Anjos
- 7 Há anos
- Visualizações:
Transcrição
1 Nível: Básico Horas: 4 Treinamento em HTML Índice Índice...1 Introdução...2 Linguagem de marcação...3 Linguagem Interpretada pelo próprio browser...3 Modelo cliente / servidor...3 Casos especiais: Netscape MS-Explorer...4 Conceitos Iniciais...5 Extensão de um novo documento:.html...5 Vendo um documento HTML...5 Conceito de tags e de documento bem formado...5 Modificando parâmetros de tags...6 Base de um Documento...7 Definindo o documento principal: <html > </ht ml >...7 Definindo o cabeçalho do documento: <head > < / h e a d >...7 Dando um título para o documento: <title > </title >...7 Definindo o corpo principal: <body> </body >...8 Alterando a cor de fundo: atributo bgcolor...8 Exibindo Informações...9 Escrevendo dados num documento...9 Criando cabeçalhos: <hn > < / h n >...9 Um parágrafo: <p > < / p >...10 Alterando o alinhamento de um texto...10 Mudando a cor do texto: <font > < /font >...11 Tornando o texto negrito: <b> < /b >...11 Tornando o texto itálico: <i> </i >...11 Tornando o texto sublinhado: <u > </ u >...11 Quebrando linhas: <br >...11 Dividindo em seções: <hr >...12 Ligações entre Páginas...12 Conceitos de links entre páginas...12 Criando um novo link: <a > < / a >...13 Inserindo Imagens...14 Inserindo uma imagem: <img >...14 Tabelas...15 Formatando dados usando tabelas: <table > < / t able >...15 Mostrando as bordas: atributo border...16 Incluindo uma nova linha: <tr > < /tr >
2 Incluindo uma nova célula: <td > < /td >...16 Mesclando linhas: atributo rowspan...17 Mesclando colunas: atributo colspan...17 Alterando a cor de fundo de uma célula...18 Alterando o alinhamento de uma célula...18 Listas...19 Definindo listas gerais: <ol> </ol > e <ul> </ul >...19 Formulários...20 Trabalhando com dados em HTML...20 Definindo um novo formulário...20 Opções de entrada de dados: <input >...21 Criando um novo campo: parâmetro text...21 Criando um botão: parâmetro button...22 Criando um botão de submissão: parâmetro submit...22 Criando um botão de limpeza: parâmetro reset...23 Criando uma nova checkbox: parâmetro checkbox...23 Criando um novo radiobutton: parâmetro radio...23 Criando um campo de senha: parâmetro password...24 Caixas de seleção: <select > < /s elect >...24 Caixas de texto: <textarea > < / t extare a >...24 Janelas...25 Definição de janelas em HTML...25 Documento de definição de janelas: <frameset > < /frameset >...26 Referência
3 Introdução Linguagem de marcação Uma linguagem de marcação é utilizada para definir formatos e padrões dentro de um documento. Normalmente elas não possuem qualquer estrutura lógica de controle como as linguagens de programação tradicionais, como condicionais e repetição. Essas linguagens se utilizam do conceito de marcador ou tag, que possuem um significado quando forem visualizados por algum sistema, para definir como essas informações deverão ser mostradas. Por exemplo, suponha que se queira deixar todas as palavras começadas pela letra A em negrito, para executar essa operação em HTML, seria necessário colocar entre as palavras começadas por esta letra, os símbolos <b> e </b>. Existem diversos tipos e padrões para linguagens de marcação e a HTML é apenas mais uma delas, mas que se popularizou por causa do advento da Internet, já que a maioria dos documentos que trafegam na rede utilizam ela para exibir suas informações. Linguagem Interpretada pelo próprio browser No caso do HTML, ele possui um código com suas várias marcações, mas que se for aberto como um documento texto, não mostra nada além de texto com marcas especiais em determinados pontos. Para que o real efeito do HTML ocorra, é preciso de um outro software, que pegue o documento fonte e interprete o que significa cada uma das marcações existentes. A função básica de um browser Web (como o Microsoft Internet Explorer e o Nestcape Navigator) é fazer exatamente isso, pegar documentos com marcações HTML e exibi- los aos usuários depois de terem interpretado suas tags, exibindo o real conteúdo de cada um documentos. Vale destacar ainda que o HTML não é compilado, como algumas linguagens de programação o são, transitando na rede de uma forma que o seu código fonte possa ser lido e interpretado por qualquer pessoa. Ele também não tem nenhum processamento no lado do servidor, este apenas envia os arquivos para a máquina cliente, que fica responsável por fazer todo o processamento. 3
4 Modelo cliente / servidor O modelo básico da internet é o chamado cliente / servidor, onde existe uma máquina central (no caso da internet, não existe um centro, pois ela cresceu a tal ponto que fica impossível gerenciá- la desta maneira) que tem armazenado os documentos que os usuários desejam ver, que são os chamados clientes. Um servidor pode atender a requisição de diversos clientes ao mesmo tempo, cada um requisitando um documento (como uma página específica de um site) diferente ao mesmo tempo. Esse servidor normalmente possui um poder de processamento bem maior, para garantir que isso possa ser feito sem uma grande demora para os clientes. As máquinas clientes após receberem os documentos do servidor pela Internet, ficam responsáveis por realizar alguma operação sobre esses arquivos, como por exemplo visualizar as informações de um determinado arquivo num browser ou em algum visualizador específico. Casos especiais: Netscape MS-Explorer Os dois sistemas mais populares para visualização de páginas HTML, aquelas que são obtidas visitando sites na internet, são o Netscape Navigator e o Microsoft Internet Explorer. O primeiro roda na maioria das plataformas existentes, mas o segundo apenas em sistemas baseados no Microsoft Windows. O Netscape Navigator já foi o líder deste segmento de mercado de visualização de páginas internet, até a aproximadamente seis anos atrás, quando a Microsoft lançou uma forte investida neste campo, disponibilizando seu browser direto em seu sistema operacional. Isso gerou diversos movimentos de acusação de concorrência desleal (deve- se levar em conta que este sistema operacional equipa a imensa maioria de computadores), porém o resultado foi a inversão da liderança deste produtos no mercado de browsers. Tecnicamente, eles são muito parecidos, ambos devem visualizar o conteúdo de um documento HTML na tela do computador. Teoricamente, o resultado deveria ser igual se os documentos fossem iguais (essa é uma das bases das linguagens de marcação), mas devido a diferentes entendimentos de algumas marcas de documento, a implementação de um e de outro pode mudar, o que acaba gerando resultados diferentes para documentos iguais. 4
5 Conceitos Iniciais Extensão de um novo documento:.html A extensão padrão para os documentos HTML é o.html, porém existe uma variação, o.htm. De movo geral, se um documento com esta extensão for criado e aberto num browser, este tentará mostrar o seu conteúdo como HTML, interpretando tags e tudo o mais. Vendo um documento HTML Como já mencionado, a maneira de se ver o resultado de um documento HTML é abrindo- o num browser. Isso tanto pode ser feito abrindo o documento diretamente, como o colocando num servidor internet e acessando- o como mais uma página da internet. O resultado deve ser o mesmo. Conceito de tags e de documento bem formado Já foi falado rapidamente o significado de tags ou marcadores no início deste documento. Este item tem como objetivo aprofundar um pouco mais este conceito. Uma tag é uma marca que deve ser colocada num documento e que determinados programas interpretam ela de alguma forma, dando um significado específico, como alterando a formatação do documento naquele ponto. Normalmente, o texto a ser modificado deve vir entre uma marca que indica o início e o fim da marcação. Essa tag deve ser alguma reconhecida pelo browser. Por exemplo: <i> Texto Modificado </i> No trecho acima, as palavras Texto e Modificado seriam mostradas em itálico, pois estão colocadas entre tags que possuem esse significado e alteram o texto desta forma quando interpretado por um browser. A imensa maioria de tags da definição do HTML possui um abre e um fecha correspondente, daí vem a definição de documento bem formado, ou seja, sempre que existir um abre, deve existir um fecha correspondente a este. Se por algum motivo uma tag não for fechada, o documento continuará a ser exibido, eventualmente com algum erro na visualização, mas nenhum erro de execução será mostrado, diferente da maioria das linguagens de programação tradicionais, onde alguma saída de erro seria mostrada para o usuário. 5
6 Modificando parâmetros de tags As tags também possuem modificadores que podem alterar parte do significado do conteúdo dela num determinado contexto. Por exemplo, o par de tags <body></body> define simplesmente o corpo de uma página HTML, porém no exemplo a seguir: <body bgcolor = blue > </body> Ela continua definindo o corpo de um documento HTML, porém modifica a sua cor de fundo para azul (a não colocação deste parâmetro implica que a cor de fundo continua branca). Existe uma infinidade de parâmetros para cada tag, que apenas com uma referência do lado consegue saber todas as suas opções ou funcionalidades. 6
7 Base de um Documento Definindo o documento principal: <html> < /html > Antes de se escrever o conteúdo que um determinado documento deverá exibir na tela deve- se identificar claramente que o documento em questão deve ser entendido como um documento HTML e que tudo que estiver contido nele receberá um tratamento especial. Esse tipo de operação é feito utilizando as tags <html > e </html >, indicando que tudo dentro delas será interpretado como uma página Internet. Definindo o cabeçalho do documento: <head> </head> Todo documento HTML possui um cabeçalho, onde pode ser escritas definições gerais e de padrões a serem seguidos em todas as partes do documento, bem como a escrita de determinados trechos de código de programação ou ligação com documentos externos. A definição do título da página, (detalhada abaixo) também deve ser escrita entre as tags <head> e </head>; Dando um título para o documento: <title> </title> Por definição, todos os aplicativos que executam sobre a plataforma Microsoft Windows (e uma grande variedade de outras plataformas) que possuem interação por janelas, possuem uma barra superior que mostra um título para o documento sendo exibido ao mesmo tempo em que também fala qual o aplicativo que está sendo executado na janela corrente. Nas páginas da Internet não é diferente a existência desses elementos. Por tanto, para colocarmos o título que desejarmos numa janela do browser utilizamos as tags <title> < / title >, que deve vir escrita entre as tags <head> e </head>. O título desejado deve vir colocado entre as tags. Podemos ter como exemplo:... <head> <title> Título da minha Janela </title> </head>... Nesse exemplo, será exibida uma janela com o título Título da Janela. 7
8 Definindo o corpo principal: <body> </body> A partir da definição destas tags, que indicam o início do corpo principal do documento, ou seja, o que será mostrado na tela do monitor em último caso, pode-se começar a escrever o conteúdo da página em si, colocando diversas tags de formatação, definindo campos de formulários, atribuindo textos, mostrando imagens e criando links entre diversos outros documentos. Alterando a cor de fundo: atributo bgcolor Como já mencionado anteriormente, a grande maioria de tags HTML possui parâmetros modificadores que de alguma forma alteram a forma como o conteúdo que virá entre as tags será exibido. Um dos parâmetros existentes para a tag <body> < /body > é a que altera a cor de fundo de toda a janela. Veja o exemplo:... <body bgcolor = blue > </body>... Neste caso, toda a janela do browser ficará com a cor azul, porém no lugar do azul, poderiam ser colocadas diversas outras cores, todas em inglês que mudariam também o fundo. Além do nome por extenso, também poderia ser colocado o valor correspondente da cor em hexadecimal, precedido do símbolo sustenido: #. Exibindo Informações 8
9 Escrevendo dados num documento Esta seção trata principalmente da forma como os dados serão exibidos na tela, alterando sua formatação, alinhamento e disposição na tela, sempre utilizando tags HTML para permitir isso. Por padrão, pode ser escrito qualquer coisa no documento, mesmo fora das tags, e mesmo assim o browser irá exibir algum conteúdo, com a diferença de que não se tem nenhum controle sobre o efeito. Vêm daí a importância de sempre utilizar tags para controlar a formatação. Não apenas abrindo uma tag e colocando o conteúdo, como também fechando a tag correspondente, para ao final gerar um documento HTML bem formado, ao mesmo tempo que tem- se um controle preciso do que um determinado browser irá exibir e não deixar que ele tome decisões que vá distorcer o conteúdo. Criando cabeçalhos: <hn> </hn > A maneira mais simples de se definir um cabeçalho (ou título) num documento HTML, é através das tags <hn> e </hn>, onde o valor do n seria substituído por algum número entre 1 e 6, sendo que valores menores indicam que o tamanho da fonte exibida será maior e números menores indicam títulos de tamanho menores. Por exemplo: <h1> Comparando Tamanhos </h1> <h2> Comparando Tamanhos </h2> <h3> Comparando Tamanhos </h3> <h4> Comparando Tamanhos </h4> <h5> Comparando Tamanhos </h5> <h6> Comparando Tamanhos </h6> Um parágrafo: <p></p> Um texto normal, ou melhor, que seja encarado como normal e que apareça em diversos pontos da página, deve vir entre as tags <p> e </p>, que denotam a existência de um parágrafo. Para visualização de algum resultado, não é necessário que exista uma tag de fechamento, porém isso pode fazer com que versões mais antigas de browsers vejam o resultado de forma diferente. <p> Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto </p> 9
10 Neste exemplo, será criado um parágrafo contendo o texto entre as tags. Caso sejam criados mais de um parágrafo, eles terão um pequeno espaçamento para indicarem que são elementos diferentes. Alterando o alinhamento de um texto Dentro das tags que trabalham com texto, pode vir um modificador, também chamado de parâmetro, que altera o alinhamento do texto que vier entre as tags (daí a importância de fechar as tags, pois mostra explicitamente até onde vai o alinhamento proposto para uma determinada tag). Existem quatro alinhamentos possíveis: esquerdo, centralizado, direito e justificado. <p align= left > Texto à esquerda </p> <p align= center > Texto à esquerda </p> <p align= right > Texto à esquerda </p> <p align= justify > Texto à esquerda </p> O texto com alinhamento à esquerda é o valor padrão, fazendo com que não seja necessário colocar explicitamente esse item quando estiver sendo declarado. O texto com alinhamento justificado, faz com que o texto fique alinhado tanto à esquerda, quanto a direita, distribuindo as palavras de uma forma homogênea. Mudando a cor do texto: <font> </font > As tags <font > e </font > servem para modificar a fonte, o tamanho e as cores utilizadas num trecho de texto de forma global, não apenas uma ou outra palavra. Com isso, tem- se um controle preciso da formatação que está se tentando alcançar. <font color= blue size= 20 > <p> Texto escrito </p> </font> Tornando o texto negrito: <b> </b > Para dar um destaque maior a algum trecho de texto, pode-se usar as tags <b> e </b>, que destacam o texto que estiver contido entre elas. Elas podem ser colocadas dentro de outras tags, como nas de parágrafo ou de título, desde que o ocorra o devido fechamento. Segue um exemplo: <p> Texto normal, mas agora com <b> negrito </b>. </p> O início da frase está normal, porém existe uma palavra destacada. 10
11 Tornando o texto itálico: <i> </i > Da mesma forma que se pode destacar algum trecho de um texto utilizando negrito, como mostrado acima, também usa-se as tags <i> e </i> para mostrar um trecho de código em itálico, como alguma citação ou palavra estrangeira. O seu uso é idêntico ao caso da tag negrito. <p> Agora em <i> itálico </i>... </p> Tornando o texto sublinhado: <u> < /u > Por fim, o último dos modificadores padrão de textos é o de sublinhado, que deve ser utilizado da mesma forma que as tags exibidas anteriormente, de negrito e itálico. Ele deixa marcado com uma linha inferior, abaixo das palavras, todas as palavras entre elas. <p> Parte <u> deste</u> texto <u> será sublinhado </u>. </p> Vale destacar que pode ocorrer qualquer combinação destas tags mostradas até o momento para se chegar ao efeito desejado. Quebrando linhas: <br > Está tag não possui fecha, ela é definida unicamente. Ela serve para inserir quebras de linhas no documento, fazendo com que o texto que vem abaixo seja ainda mais deslocado. É muito importante para arrumar a disposição dos elementos gráficos na tela. Pode-se colocados quantos desejar. <h1> Linha 1 </h1> <br><br><br><br><br> <h1> Linha 2 </h1> Neste exemplo, apesar de todas as frases estarem na mesma linha, foram inseridas cinco quebras de linha, o que irá fazer com que o segundo texto seja deslocado em cinco linhas para baixo. Dividindo em seções: <hr > Da mesma forma que a tag <br>, está também não possui uma tag para indicar o seu final, ela é definida unicamente. Ela serve para colocar linhas verticais, principalmente para implementar a divisão de seções dentro de um mesmo conteúdo. Por exemplo <p> Primeira Seção </p> <hr> <p> Segunda Seção </p> 11
12 Ligações entre Páginas Conceitos de links entre páginas Um dos fundamentos da Internet é permitir que se possa ir de um lugar a outro da rede com apenas um clique. Esta é a função dos links, estabelecer conexões entre diversas páginas, sejam elas internas, dentro do mesmo site, seja referenciando sites externos, de outras empresas, mas que sejam relevantes para o conteúdo sendo discutido no momento. Dessa forma, surgem dois conceitos, o de link absoluto e o de link relativo, fundamentais para a implementação de links dentro de uma página. Um link absoluto define todo o caminho onde uma segunda página está hospedada e que será aberta no browser. Um link relativo indica apenas parte do endereço, utilizando conceitos dos diretórios em uso para indicar outra página. Em maiores detalhes, o diretório corrente onde uma página HTML está salva é chamado diretório raiz. Para se referenciar ao diretório (e eventuais arquivos) que está abaixo numa hierarquia, usa-se o pontoponto:... Para indicar um diretório acima na hierarquia, utiliza-se o nome do diretório, mas caso exista mais de um, deve- se separar os nomes por uma barra /. Esses conceitos são os mesmos que utilizados para a navegação em sistemas computacionais baseados em linha de comando, como o MS- DOS ou um terminal, no Linux. Prefira sempre utilizar caminhos relativos aos absolutos, pois isso garante uma facilidade maior caso seja necessário modificar o endereço em que a página está hospedada, pois todo os demais diretórios ficam intactos. Criando um novo link: <a> </a > Agora, tecnicamente, um link é definido no HTML como um pedaço de texto (ou outro objeto qualquer, como uma imagem) que ao ser clicado leva a um outro lugar, ou seja, à outra página. Isso é feito utilizando as tags <a> e </a>, que deverão englobar o texto que será dado destaque e que será clicado pelo usuário final. Por exemplo, criando um link vazio: <p> Texto: <a> Clique Aqui </a> </p> Neste exemplo, nenhuma operação será feita, porém o link foi criado e pode ser clicado (aparecerá a mãozinha, inclusive) porém o usuário 12
13 permanecerá na mesma página. Para executar alguma operação que realmente leva o usuário a outra página, é preciso incluir um parâmetro que mostra a página de destino. Por exemplo: <p>texto:<a href= >Clique Aqui</a></p> Neste caso, o resultado será o redirecionamento para o link absoluto definido na tag href. Usando um link relativo: <p>texto:<a href=../arqs/artigo.html >Clique Aqui</a></p> Neste último exemplo, o arquivo que será aberto é procurado um nível abaixo da hierarquia corrente, depois dentro do diretório arqs e por fim, procura- se um arquivo de nome artigo.html. Caso ele não exista, um erro é retornado, senão o documento é exibido na tela. 13
14 Inserindo Imagens Inserindo uma imagem: <img > Uma imagem é encarada como um objeto que pode ser inserido em qualquer lugar da página, não precisando inclusive ter uma tag que a feche. No ponto em que se deseja colocar a imagem deve- se colocar a tag correspondente e indicar o local onde a imagem fonte está armazenada e o nome da imagem a ser inserida. Todos os comentários de links absolutos e relativos se aplicam aqui. <img src= imgs/teste/cavalo.jpg > Para que uma imagem se torne um link, basta que uma tag <a> e </a> englobe uma tag <img>. 14
15 Tabelas Formatando dados usando tabelas: <table> </table> A melhor maneira, senão a única, de dispor elementos gráficos numa página HTML é através do uso de tabelas, pois garante que um determinado elemento ou texto ficará aonde deseja que ele fique, porém isso aumenta em muito a complexidade na elaboração de páginas. Atualmente, existem diversos editores que facilitam essa operação, pois desenham as tabelas e ocultam o código. Para declarar uma nova tabela, deve ser feito uso das tags <table> e </table>, que indicam que uma nova tabela será criada, com suas várias linhas e colunas. Neste ponto, não existem dados ainda, então o resultado visível não é muito grande, mais adiante é que os dados serão inseridos dentro desta nova tabela. Mostrando as bordas: atributo border Quando se está trabalhando com tabelas, é fundamental saber onde as linhas e colunas estão aparecendo, mesmo que para a página como um todo seja mais interessante, por questões de design, que as bordas não apareçam. Enfim, ao menos em fase de desenvolvimento, as bordas devem aparecer. Isso é feito através do parâmetro border, dentro de table. Assim: <table border= 1 > </table> Neste caso, esta tabela terá bordas de tamanho 1. Incluindo uma nova linha: <tr> < /tr > Para incluir uma nova linha à uma tabela, deve- se usar as tags <tr > e </tr >. Tudo que estiver entre elas, será disposta na mesma linha, independente do resultado final de exibição. Elas devem vir dentro das tags <table > e <table >. Assim: <table border= 1 > <tr> Exemplo </tr> <tr> Exemplo </tr> <tr> Exemplo </tr> </table> Aqui, serão escritas três linhas nesta tabela. 15
16 Incluindo uma nova célula: <td > </td > Por fim, para declarar todas as possibilidades de uma tabela, deve ser possível declarar colunas dentro de uma tabela. Isso é feito utilizando as tags <td > e </td >, que por sua vez devem vir dentro das tags <tr > e </tr >. Os dados propriamente ditos são colocados dentro de <td > e </td >. Vale destacar, que desta forma, fica definido uma célula. Por exemplo: <table border= 1 > <tr> <td> C11 </td> <td> C12 </td> <td> C13 </td> </tr> <tr> <td> C21 </td> <td> C22 </td> <td> C23 </td> </tr> <tr> <td> C31 </td> <td> C32 </td> <td> C33 </td> </tr> </table> No exemplo acima, uma tabela, com três linhas e três colunas. Mesclando linhas: atributo rowspan Em algumas situações, algumas células não possuem dados e para não deixa- las simplesmente vazias, o que pode tornar mais confuso o entendimento do código, existe o conceito de span, que serve para mesclar (como os conceitos do Microsoft Excel), juntando o espaço de duas células e tornando- a uma só. No caso do atributo rowspan, deve- se definir quantas linhas deseja-se incluir, daquela mesma coluna, na célula final resultante. Isso é feito apenas na primeira célula, sendo que as demais devem ser removidas. Pegando o exemplo anterior, vamos mesclar toda a primeira coluna: <table border= 1 > <tr> <td rowspan= 2 > C11 </td> <td> C12 </td> </tr> <tr> <td> C22 </td> </tr> <tr> <td> C32 </td> </tr> </table> Mesclando colunas: atributo colspan A mesma idéia aplicada no item acima, para a questão de mesclar linhas pode ser aplicada para mesclar colunas, onde diversas colunas podem ser unidas numa única, removendo o código das demais. Assim: <table border= 1 > <tr> <td colspan= 2 > C11 </td> <td> C12 </td> </tr> <tr> <td> C21 </td> <td> C22 </td> </tr> 16
17 <tr> <td> C31 </td> <td> C32 </td> </tr> </table> Alterando a cor de fundo de uma célula Cada célula numa tabela pode ser tratada independentemente, modificando seus parâmetros, e fazendo com que apenas uma delas tenha sua exibição modificada. Para termos este efeito, é necessário incluir nas tags <td > os modificadores correspondentes para mudar o comportamento daquela célula em especial. Dessa forma, para alterar a cor de fundo de uma célula, é preciso incluir o atributo bgcolor <??? Confirmar> o qual irá receber como valor modificador a nova cor que será colocada no fundo da célula. Esse nome de cor seguem os mesmo padrões de cores que devem ser utilizados em HTML, ou seja, devem ser em inglês ou o valor hexadecimal precedido de sustenido e entre aspas. <table border= 1 > <tr> <td bgcolor= 0000FF > azul </td> <td bgcolor= yellow > amarelo </td> </tr> <tr> <td bgcolor= gray > cinza </td> <td bgcolor= #FF0000 > vermelho </td> </tr> </table> Alterando o alinhamento de uma célula Da mesma forma que se pode incluir modificadores para cores de células, independentes umas das outras, pode-se também alterar o alinhamento do conteúdo existente dentro de uma célula, seja texto, seja uma imagem, como exemplos. Alguns exemplos: <table border= 1 > <tr> <td align= left > esquerda </td> <td align= center > centro </td> </tr> <tr> <td align= right > direito </td> <td align= justify > justificado </td> </tr> </table> 17
18 Listas Definindo listas gerais: <ol></ol> e <ul></ul> Uma outra forma de organizar as informações numa página HTML é através de listas, que são itens estruturados e separados por algum símbolo de marcação, como um círculo ou um quadrado, ou ainda numerados, para informar alguma ordem lógica entre as diversas informações que desejam ser exibidas. As listas definidas com as tags <ol> possuem alguma ordenação lógica, ou seja, estão numeradas num intervalo de valores previamente conhecido. Já as listas definidas com <ul> não possuem uma ordem lógica, sendo utilizado algum caracter marcador para a disposição dos dados. Por exemplo: <ol> <li> Primeiro </li> <li> Segundo </li> <li> Terceiro </li> <li> Quarto </li> </ol> Na lista acima, será exibido quatro itens, numerados de um até quatro, sendo colocado ao lado de cada marcador o valor que estiver entre as tags <li>, que é o marcador para definir um novo elemento a ser posto dentro de alguma lista, seja ela ordenada, como no exemplo acima, seja uma lista não ordenada. Outro exemplo: <ul> <li> Um </li> <li> Dois </li> <li> Três </li> <li> Quatro </li> </ul> O resultado do exemplo acima será o mesmo que o obtido no primeiro exemplo, com exceção do formato dos marcadores, que ao invés de números, será exibido bolinhas para diferenciar os diferentes elementos que são mostrados. 18
19 Formulários Trabalhando com dados em HTML Para projetos maiores e que necessitam trocar ou obter informações do usuário, texto simples e estático, não é muito interessante, pois acaba sendo um caminho de mão única de comunicação entre o desenvolvedor e o usuário que está acessando os dados. Sendo assim, a linguagem HTML oferece suporte a um grupo de estruturas para fazer o caminho de volta. Sempre que alguém preenche seus dados numa página de cadastro, ela está fazendo uso de formulários do HTML. Essas estruturas fornecem campos de texto por extenso, botões, caixas de seleção e de senha. Em sistemas mais complexos e que trabalham com bases de dados, esses conceitos são dos mais utilizados para a elaboração do sistema. Nos itens a seguir, serão mostrados os principais elementos para construção de formulários em HTML e de que forma eles se comportam num sistema. Definindo um novo formulário Para deixar claro que daquele ponto em diante será utilizado um formulário e seus diversos elementos, deve- se antes declarar essa informação explicitamente, inclusive com alguns outros parâmetros que irão controlar o comportamento dos dados entre o computador cliente e o servidor, onde as informações poderão ser tratadas e, por exemplo, inseridas numa base. < form name= pri_form method= post action= arquivo.php > </form> Todos os demais elementos devem vir entre as tags <form> e </form>. O primeiro parâmetro, name, indica o nome do formulário, o que servirá para referenciá- lo em outros trechos do código. O parâmetro method indica de que forma os dados serão enviados para o servidor (post indica que os dados serão ocultos, a outra opção, get, os dados irião visíveis) e por fim, action, indica qual o arquivo que deve tratar os dados depois do envio. 19
20 Opções de entrada de dados: <input> Uma das tags mais simples e ao mesmo tempo mais utilizadas, é a tag <input>. Ela não possui uma correspondente que a fecha e ela é utilizada para permitir ao usuário inserir informações alfanuméricas ou então mostrar um botão clicável. Existem alguns modificadores que podem ser utilizados que alteram a forma como os dados serão digitados pelos usuários. A seguir são mostrados os vários tipos de estruturas que a tag input pode representar, alterando apenas o campo type, que indica qual o tipo de estrutura deve ser visualizada no formulário. Além do tipo, é importante colocar o parâmetro name ou id, para mostrar qual o identificador para aquela estrutura, para que possa ser referenciado no futuro, caso seja necessário. Criando um novo campo: parâmetro text Quando se deseja digitar alguma informação alfanumérica num formulário deve- se utilizar o parâmetro text na declaração do campo. Isso é feito da seguinte forma: <input type= text name= campo maxlength= 50 size= 50 > A palavra input indica uma nova entrada de dados. O item, type= text, indica um novo campo de entrada para texto. O item name= campo, declara um nome para o campo poder ser acessado por outras linguagens de programação. Os outros dois parâmetros são itens para visualização. O primeiro mostra o número máximo de caracteres que podem ser inseridos e o segundo o tamanho do campo que será mostrado na tela. Outros parâmetros podem estar presentes. Eventualmente, podem existir informações padrões que vieram de outras fontes, como uma base de dados, e deseja-se que essa informação seja o padrão do campo, ou seja, que já venha digitado alguma coisa nele. Para isso, usa-se o parâmetro value, seguido do texto a ser exibido. Por fim, existe o item readonly, para não permitir modificações no conteúdo do campo. Criando um botão: parâmetro button Outro item muito interessante em formulário é a inserção de botões, que quando clicados, disparam alguma ação, como executar o código fonte de alguma outra linguagem de programação. É necessário o uso de outra linguagem de programação porque o HTML não fornece 20
21 suporte a um grande número de estruturas muito comuns em programação (condicionais, repetições, etc). <input type= button name= botao value= Aperte > A declaração do botão acima não realizará qualquer operação em especial, apenas permitirá ao usuário ficar apertando um botão na tela, no entanto esse exemplo é bem explicativo. A declaração do botão segue o mesmo padrão de um campo texto, com a diferença do tipo. O parâmetro value também tem outra função, ele serve para indicar o título inserido no corpo do botão. Para associar algum tipo de comportamento mais avançado ao botão, deve- se incluir um outro parâmetro, o mais comum é o onclick associado a alguma função, que também pode ser chamado de evento. Ele indica que sempre que o botão for clicado ele chamará a função (ou método) ao qual estiver associado, por exemplo da linguagem JavaScript. Outro exemplo: <input type= button name= botao_2 value= Aperte onclick= ola_mundo(); > A função ola_mundo() deve ser escrita em algum trecho do código e ser visível por esse trecho de código. No momento que o usuário apertar o botão, a função será chamada e código dela executada. Criando um botão de submissão: parâmetro submit A declaração de um botão de submissão é idêntica ao de um botão comum, inclusive com sua visualização sendo idêntica ao de um botão normal, com a diferença de que já existe uma operação préconfigurada, a de envio dos dados do formulário para o formulário onde as páginas HTML estão hospedadas, fazendo com que os dados sejam tratados. Por exemplo: <input type= submit name= envio value= Enviar > Será criado um botão com o título Enviar que quando clicado pegará todos os dados preenchidos nos demais campos deste formulário e o enviará para o servidor. 21
22 Criando um botão de limpeza: parâmetro reset Um botão de reset possui a mesma definição do submit, porém com uma ação associada diferente, e potencialmente destrutiva, ou seja, uma vez acionado o botão, todas as informações de todos os campos do formulário são apagadas, fazendo com que os campos retornem ao estado inicial. Essa operação é perigosa por eventualmente fazer com que o usuário digite todas as informações novamente. Por exemplo: <input type= reset name= apag value= Apagar > Criando uma nova checkbox: parâmetro checkbox Uma checkbox (ou caixa de marcas) permite ao usuário marcar, dentre um grupo de opções, aquelas que ele deseja, mais de uma se for o caso. Para indicar que todas as opções se referem ao mesmo grupo, os nomes de todos os campos devem ser o mesmo. Por exemplo: Quais cores você gosta? <input type= checkbox name= cores > Azul <input type= checkbox name= cores > Vermelho <input type= checkbox name= cores > Amarelo Neste caso, o usuário poderia escolher qualquer combinação de cores, marcando uma, duas ou as três opções. Criando um novo radiobutton: parâmetro radio A forma de declarar um campo radiobutton (ou radio) é muito semelhante ao de checkbox, inclusive com a obrigatoriedade de o nome ser igual para todas as opções, sendo que a maior diferença está que nesta opção, a seleção é única, ou seja, só pode ser escolhida uma opção dentre as várias que são fornecidas para o usuário. Por exemplo: Qual a sua faixa etária? <input type= radio name= idades > Menor 18 <input type= radio name= idades > Entre (inclusive) 18 e 50 <input type= radio name= idades > Maior 50 Nestas opções, um mesmo usuário não pode escolher mais de uma opção, pois ele não pode se encaixar, simultaneamente em duas faixas etárias distintas, como é o caso. Criando um campo de senha: parâmetro password Campos password são úteis quando não se deseja que outros usuários vejam as informações que estão sendo digitadas num campo, por 22
23 exemplo numa senha ao se validar a entrada de um usuário de um sistema, ou mesmo quando o usuário estiver inserindo sua senha num cadastro qualquer. Sua declaração é muito parecida com a de um campo normal: <input type= password name= sna size= 10 maxlength= 10 > Aqui é criado um campo de tamanho dez caracteres e que só permite ao usuário digitar dez caracteres quando da inserção de dados. No lugar dos caracteres, que seriam o normal aparecer na tela, são exibidos asteriscos, ocultando assim a entrada dos usuários. Caixas de seleção: <select></select> Caixas de seleção são muito utilizadas para permitir ao usuário selecionar apenas uma opção dentre várias existentes, sem mostrar todos os itens ao mesmo tempo (como no caso da checkbox), obtendose um ganho de espaço considerável na tela, facilitando a formatação e diagramação da página. Sua declaração segue: <select name= selecao > <option value= 1 > Item 1 </option> <option value= 2 > Item 2 </option> <option value= 3 > Item 3 </option> </select> Neste caso, foi criada uma caixa de seleção com três opções, sendo que cada opção possível é declarada entre as tags <option> e </option>. Deve ser dado um nome para a caixa de seleção para referência futura. Um parâmetro utilizado dentro da tag <option>, value, mostra qual o valor que será considerado quando a opção for selecionada. Caixas de texto: <textarea></textarea> Esse elemento é utilizado principalmente quando a quantidade de texto a ser digitado pelo usuário é muito grande. Ela permite uma melhor visualização de grandes quantidades de caracteres, mesmo que isso não seja a melhor solução de exibição de informações em páginas HTML. Sua declaração segue o seguinte modelo: <textarea name= tarea rows= 10 cols= 40 ></textarea> No exemplo acima, é declarada uma textarea de nome tarea, que tenha dez linhas e quarenta colunas, onde cada coluna é o 23
24 espaçamento de um caractere. Caso exista algum texto que se deseja colocar por padrão neste campo, ele deve ser posto entre as tags. 24
25 Janelas Definição de janelas em HTML Uma janela de um browser pode ser considerada inteira, com apenas um documento ocupando toda a área visível ou então pode ser dividida em diferentes partes, cada uma ocupada por um documento HTML diferente, que de alguma forma se relacionam, ou seja, ao se clicar num link numa janela a página será aberta em outra. Esse conceito é chamado de frames. Como nem todos os browser suportam a definição de frames (todas as versões mais recentes suportam atualmente) nem sempre foi uma boa idéia implementar soluções utilizando esses conceitos. Vale destacar que com o uso de outras tecnologias (como PHP e ASP) o uso de frames pode dificultar o desenvolvimento dos sistemas, sendo mais simples utilizar uma única página. Documento de definição de janelas: <frameset></frameset> Quando se usa frames, deve existir um documento especial que define como ele serão montados, quais os arquivos serão chamados e de que forma eles se relacionam. Isso é feito através do uso das tags <frameset> < /frameset >, que devem ser utilizadas no lugar das tags <body > < / body > que existem num documento normal HTML. Dentro destas tags é que virão algumas configurações de parâmetros e de frames que serão utilizadas para exibir o resultado. Vale destacar que quando se deseja visualizar o resultado, este documento de definição é o que deve ser aberto no browser e não qualquer outro que compunham o conteúdo que será visto na tela. <frameset cols= 25%, 75% > <frame name= esq src= menu.html > <frame name= dir src= conteudo.html > </frameset> Nesta definição, é definido um frame com duas colunas sendo uma ocupando 25% da tela e a outra ocupando 75% da tela. A seguir, são definidos o conteúdo dos dois frames, sendo que no primeiro, chamado esq, deve ser aberto o arquivo menu.html e no menu direito será aberto o arquivo conteudo.html. Uma definição alternativa, é que ao invés de separar os frames por colunas, separar por linhas, neste caso, no lugar de cols deverá ser colocado a palavra rows. 25
26 Referência www. w 3c.org World Wide Web Consortium. Site de referência mundial para desenvolvimento Internet, pois concentra todas as definições dos padrões utilizados. Possui um vasto material de consulta, do básico ao avançado, além de diversos artigos técnicos e novas tendências mundiais no que toca o avanço da Internet. 26
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
Recursos Complementares (Tabelas e Formulários)
Linguagem de Programação para Web Recursos Complementares (Tabelas e Formulários) Prof. Mauro Lopes 1-31 30 Objetivo Nesta aula iremos trabalhar o conceito de tabelas e todas as tags associadas ao seu
Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/06/2011
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 Tabelas INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 3 Largamente suportado(browser); Controlar
O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2
HTML O que faz um servidor/navegador web? e 2 O que é? HyperText Markup Language Utilizada para produzir páginas WEB Documentos escritos na linguagem HTML podem ser traduzidos por browser O HTML utiliza
Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/04/2011
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 Tabelas INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 3 Largamente suportado(browser); Controlar
Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham ape
INTRODUÇÃO A PROGRAMAÇÃO HTML Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham apenas os comandos necessários
Informática I. Aula 3. Aula 3-03/09/2007 1
Informática I Aula 3 http://www.ic.uff.br/~bianca/informatica1/ Aula 3-03/09/2007 1 Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e
COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS
COM222 DESENVOLVIMENTO DE SISTEMAS WEB Aula 01: HTML e CSS 2 Conteúdo Noções introdutórias HTML CSS HTML: HyperText Markup Language 3 Linguagem usada para construir páginas Web Função principal Estruturar
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
Tabelas Div Span Frames Formulários
Tabelas Div Span Frames Formulários Tabelas Tabelas implementam um conceito importante de layout: as grades, segundo as quais organizamos textos e ilustrações de maneira harmoniosa. A utilização de tabelas
Módulo 17E. Revisões de HTML. A) Noções básicas de HTML
Módulo 17E Revisões de HTML A) Noções básicas de HTML Estrutura básica de um documento Um documento HTML começa com a tag de abertura e termina com a tag de fecho . De seguida, temos a considerar
HTML. Professor Victor Sotero. html
HTML Professor Victor Sotero html 1 Conceito Linguagem com a finalidade de marcação de hipertexto, sendo assim escritas páginas da web, e interpretada pelo navegador. As páginas contém um código fonte,
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
HyperText Markup Language HTML. Formulário
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/ Introdução O usuário interage com os serviços
3. Construção de páginas web Introdução ao HTML
3. Construção de páginas web 3.1. Introdução ao HTML 1 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido para especificar a organização lógica de um documento com extensões de hipertexto,
Treinamento em CSS. Índice
Nível: Básico Horas: 2 Treinamento em CSS Índice Índice...1 Introdução...2 Formantando documentos...2 O que é CSS?...2 Por que utilizar CSS?...2 Separando o sistema em camadas...3 Vinculando um arquivo
HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 HTML? INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 1 Hypertext Markup Language (Linguagem de
Formulários são áreas onde se inserem campos que permitem uma troca de informações maior entre usuários e desenvolvedores de sites HTML Até o momento,
HTML Formulários são áreas onde se inserem campos que permitem uma troca de informações maior entre usuários e desenvolvedores de sites HTML Até o momento, HTML mostrou-se uma linguagem bastante adequada
Adicionando mais tags HTML
Instituto Federal de Minas Gerais Campus Ponte Nova Adicionando mais tags HTML Professor: Saulo Henrique Cabral Silva Bookmark Bookmark ou demarcação de destinos para links (informações) dentro do próprio
Sibele Loss Edimara Heis
Sibele Loss Edimara Heis 2016 TUTORIAL ETC Tela Inicial É a primeira tela que aparece ao se logar no sistema. Nesta tela encontram se as funcionalidades do ETC (Notificações, Documentos, Biblioteca, Mensagens,
Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)
Módulo 17E Revisões de HTML A) Noções básicas de HTML (cont.) Inserção de Imagens A inserção de imagens em documentos HTML é feita através da tag (que não tem tag de fecho). A indicação do local
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
O que faz um servidor/navegador web? 30/03/2017 Rômulo da Silva Lima Slid e 2
HTML O que faz um servidor/navegador web? e 2 O que é? HyperText Markup Language Utilizada para produzir páginas WEB Documentos escritos na linguagem HTML podem ser traduzidos por browser O HTML utiliza
Introdução a HTML. André Tavares da Silva.
Introdução a HTML André Tavares da Silva andre.silva@udesc.br HTML HiperText Markup Language Linguagem de marcação para criar páginas Web Formada por textos e comandos chamados tags (etiquetas/rótulos)
Tarlis Portela Web Design HTML
Tarlis Portela Web Design HTML HTML Definição HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) ; É uma linguagem de marcação utilizada
INTRODUÇÃO A PROGRAMAÇÃO PARA WEB
INTRODUÇÃO A PROGRAMAÇÃO PARA WEB PROF. ME. HÉLIO ESPERIDIÃO Navegador O navegador também conhecido como web browser é um programa que habilita seus usuários a interagirem com documentos hospedados em
17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,
Tutorial Cold Fusion Módulo 2 Cold Fusion Brasil -
www.coldfusionbrasil.com.br 2000 ENTENDENDO MAIS SOBRE CFOUTPUT 3 USO DO PARÂMETRO GROUP 3 USO DO PARÂMETRO GROUPCASESENSITIVE 4 USO DO PARÂMETRO STARTROW 4 USO DO PARÂMETRO MAXROWS 4 CRIANDO FORMULÁRIOS
PROGRAMAÇÃO EM AMBIENTE WEB I
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,
Autoria Web. Professor: Diego Oliveira. Conteúdo 03: Tags de Formulário
Autoria Web Professor: Diego Oliveira Conteúdo 03: Tags de Formulário Caminhos Os caminhos dentro de um projeto HTML podem ser Relativos ou Absolutos O caminho Relativo é o caminho a partir da página em
Construção de sites Aula 1
Construção de sites Aula 1 Programa Instrutor Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 31 de Julho de 2010 Indice Estrutura da Internet 1 Estrutura
Informática I. Aula 8. Aula 8-19/09/2007 1
Informática I Aula 8 http://www.ic.uff.br/~bianca/informatica1/ Aula 8-19/09/2007 1 Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e
HTML - Definição e Conceitos
1 HTML - Definição e Conceitos HTML e uma abreviação para Hyper Text Markup Language ou Linguagem de Marcação de Hipertexto. É uma linguagem utilizada pra criação de páginas para a internet que serão "interpretadas"no
TAGS. O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. <tag>conteúdo da tag</tag>
HTML DDW TAGS O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. conteúdo da tag Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos
Microsoft Word 2010 NORMA ABNT para Trabalhos Acadêmicos Conceitos Básicos
Microsoft Word 2010 NORMA ABNT para Trabalhos Acadêmicos Conceitos Básicos contato@suptecinfo.com.br SUMÁRIO Iniciando o Word... 1 Conhecendo a Ferramenta... 1 Menu Layout da Página... 2 Capa... 3 Folha
Dreamweaver CC_15x21.indd 1 06/04/ :04:22
Dreamweaver CC_15x21.indd 1 06/04/2015 11:04:22 SUMÁRIO INTRODUÇÃO... 3 CAPÍTULO 1 Iniciando e conhecendo o Dreamweaver... 8 Interfaces... 21 Criando e configurando sites... 22 CAPÍTULO 2 Criando arquivos...
PROFESSORA MERRIS MOZER. Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias
PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 1 HTML INTRODUÇÃO O que é HTML? INTRODUÇÃO HTML ou Hypertext
20/02/2014. <HTML> Introdução </HTML> Web
Introdução 1 Web 2 1 Web 3 Web 4 2 Web 5 Browsers 6 3 Editores 7 Editores 8 4 Aula Teórica-prática Etiquetas (tags) base Etiqueta principal e que deve abranger todo o código;
HTML. Leonardo Gresta Paulino Murta
HTML Leonardo Gresta Paulino Murta leomurta@gmail.com Introdução a HTML Formulários em HTML Critério para escolha de campos Agenda Leonardo Murta HTML 2 HTML HyperText Markup Language Criada por Tim Berners-
Projeto Integrador. Pesquisa HTML5. Green Friday. Gestão em Tecnologia da Informação. Turma 1º B
Projeto Integrador Green Friday Pesquisa HTML5 Gestão em Tecnologia da Informação Turma 1º B Versão : 1.0.0 Equipe Cristiano Margarida Rodrigues Idealização e arquitetura Tiago Dariel Gois Marques - Teste
MANUAL DE PUBLICAÇÃO NO PORTAL CAMPUS MATÃO
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SÃO PAULO CAMPUS MATÃO MANUAL DE PUBLICAÇÃO NO PORTAL CAMPUS MATÃO AUTOR: COORDENADORIA DE TECNOLOGIA DA INFORMAÇÃO CAMPUS MATÃO MATÃO 2016 SUMÁRIO
HTML: INTRODUÇÃO TAGS BÁSICAS
HTML: INTRODUÇÃO TAGS BÁSICAS CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB I PROF. ALEXANDRO DOS SANTOS SILVA 1 1 SUMÁRIO Definição Editores HTML Estrutura básica de um documento
Inserindo Imagem. Inserindo uma imagem a partir da Galeria
Inserindo Imagem No writer, para inserir uma imagem é muito simples. Para isso, basta clicar no menu Inserir Figura (De um arquivo, Digitalizar, Galeria do Fontwork). É possível modificar os atributos
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
HTML. HyperText Markup Language. Elaborado por Marco Soares
HTML HyperText Markup Language 1 HTML É uma linguagem de marcação utilizada para produzir páginas web As páginas web ou documentos html podem ser interpretados por navegadores web/browsers tais como Google
Introdução a Tecnologia da Informação
Introdução a Tecnologia da Informação Informática Básica Software de apresentação Prof. Jonatas Bastos Power Point p Faz parte do pacote Microsoft Office; p Software com muitos recursos para construção
Conhecendo a aba Início
Conhecendo a aba Início Grupo: Células... pág. 2 1º Exercício... pág. 6 Grupo: Alinhamento... pág. 7 2º Exercício... pág. 7 Grupo: Número... pág. 8 3º Exercício... pág. 9 Grupo: Fonte... pág. 10 4º Exercício...
Aula 4 Microsoft PowerPoint 2003: Criando uma Apresentação
Universidade de São Paulo/Faculdade de Saúde Pública Curso de Saúde Pública Disciplina: HEP 147 Informática I Aula 4 Microsoft PowerPoint 2003: Criando uma Apresentação 1 Introdução ao Microsoft PowerPoint
Introdução à linguagem HTML. Volnys Borges Bernal
1 Introdução à linguagem HTML Volnys Borges Bernal 2013-2015 Volnys Bernal 2 Introdução à linguagem HTML Sumário Visão geral Primeira página Principais tags Principais atributos Formulários 2011-2015 Volnys
INFORMÁTICA PARA CONCURSO MINISTÉRIO PÚBLICO DO PARÁ Cargo: AUXILIAR DE ADMINISTRAÇÃO.
INFORMÁTICA PARA CONCURSO MINISTÉRIO PÚBLICO DO PARÁ 2019. Cargo: AUXILIAR DE ADMINISTRAÇÃO. CONCEITOS BÁSICOS E UTILIZAÇÃO DE APLICATIVOS PARA EDIÇÃO DE TEXTOS, PLANILHAS ELETRÔNICAS E APRESENTAÇÕES:
Para visualizar corretamente configurar a tela para 1024 x 768 pixels. Tabelas
Para visualizar corretamente configurar a tela para 1024 x 768 pixels Tabelas Sumário Alinhamento de conteúdo Autoformatação Barra suspensa Como criar uma tabela Como excluir elementos Como inserir elementos
Sumário. 1- Notícias. 1.1 Publicando uma nova notícia Blocos de edição
O site desenvolvido pela SH3 é intuitivo, totalmente gerenciado através de um painel de administração. Nele o usuário responsável será mantenedor de todas as informações e configurações existentes, podendo
Programação para web HTML: Formulários
Programação para web HTML: Formulários Professor: Harlley Lima E-mail: harlley@decom.cefetmg.br Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 9 de março
Autoria Web. Formulários Aula 5. Cleverton Hentz
Autoria Web Formulários Aula 5 Cleverton Hentz Sumário da Aula } Introdução } Formulários Básicos } Elementos Suportados 2 Introdução } Os formulários possibilitam o envio de informação para o servidor
Web Design Aula 10: Formulários - Parte2
Web Design Aula 10: Formulários - Parte2 Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Textarea Select FieldSet e Legend Atributo Action Atributo Method Exercício Form Um formulário
Desenvolvimento Web TCC Turma A-1
Desenvolvimento Web TCC-00.226 Turma A-1 Conteúdo Projeto de Interface com o Usuário em HTML Professor Leandro Augusto Frata Fernandes laffernandes@ic.uff.br Material disponível em http://www.ic.uff.br/~laffernandes/teaching/2013.2/tcc-00.226
Formulários [8] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira
![Formulários [8] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira](/thumbs/68/58571051.jpg "Formulários [8] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira")
Desenvolvimento e Design de Websites Prof.: Ari Oliveira Formulários: Tag form Campos: Texto, Senha, checkbox, radio, botões, textarea e menu select. 2 Crie uma Tabela de Horários Faça seu horário semanal,
Uma pasta é pouco mais que um contêiner no qual é possível armazenar arquivos. Se
9. ARQUIVOS E PASTAS 9.1 O QUE SÃO ARQUIVOS E PASTAS? Um arquivo é muito parecido com um documento digitado que você poderia encontrar na mesa de alguém ou em um arquivo convencional. É um item que contém
INFORMÁTICA. 02. Com relação à figura abaixo e ao Word, marque a opção correta:
INFORMÁTICA 01. Todos os aplicativos abaixo são usados para edição de texto, EXCETO a) WordPad b) NotePad c) MS Word d) Windows Media Player e) BrOffice.org Writer 01. D Comentário: Os aplicativos que
MANUAL DE UTILIZAÇÃO DO SOFTWARE DE IMPRESSÃO DE ETIQUETAS MOORE.
MANUAL DE UTILIZAÇÃO DO SOFTWARE DE IMPRESSÃO DE ETIQUETAS MOORE. Uma marca de sucesso da 1 CONTEÚDO 3 3 3 4 4 5 5 6 6 6 6 7 7 7 7 8 9 9 10 10 10 11 11 11 11 12 12 13 SOFTWARE DE IMPRESSÃO DE ETIQUETAS
Word. Introdução. Introdução. Introdução. Interface padrão Margem esquerda da página. Interface padrão
Introdução Word Prof. Leandro Tonietto Cursos de Informática Unisinos Março-2008 É um editor de textos... ou processador de textos. Editores de texto X processadores de texto. Editor Notepad Kwrite Textpad
Aula 6: Frames. Pré-requisitos: Os temas das aulas 2 e 5, e a forma como se define cores apresentada na aula 4, serão muito importantes para frames.
Aula 6: Frames Você certamente já visitou páginas organizadas em áreas diferenciadas que podiam ser usadas, redimensionadas movidas para cima ou para baixo independentemente. Pois essa possibilidade de
HTML (HyperText. Markup Language)
Pontifícia Universidade Católica do Rio Grande do Sul PUCRS Faculdade de Informática HTML (HyperText Markup Language) Prof. Fabiano Passuelo Hessel Profª. Leticia Lopes Leite Julho de 2002. 1. Introdução
Manual de Utilização do software Colacril Office para criação e impressão de etiquetas. Manual de Utilização
Manual de Utilização do software Colacril Office para criação e impressão de etiquetas. Manual de Utilização Conteúdo Colacril Office... 3 Instalação do Colacril... 3 Inicialização do Colacril Office...
Formulários. Etapa 1 Criação de formulários
9 Formulários Objetivos deste capítulo Ao terminar este capítulo, você deverá: Saber o que são formulários; Conhecer as principais tags para construção de um formulário; Criar o layout simples de um formulário.
Programação Web Aula 2 XHTML/CSS/XML
Programação Web Aula 2 XHTML/CSS/XML Departamento de Informática UFPR 17 de Fevereiro de 2014 1 Histórico 2 Funcionamento 3 Atributos 4 HTML5 Estrutura de uma arquivo HTML5 Validação Tags básicas Seleção
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):
HTML Parte III. André Tavares da Silva.
HTML Parte III André Tavares da Silva andre.silva@udesc.br Formulários São estruturas que permitem que usuários submetam dados a uma página. Esses dados podem ser tratados e/ou armazenados dependendo da
TRABALHO FINAL 20 Pontos
Técnico em Informática Integrado ao Ensino Médio Algoritmos e Banco de Dados Profa. Cleiane Gonçalves Oliveira TRABALHO FINAL 20 Pontos O trabalho final deverá constar os três seguintes tipos de funções:
Writer. Interface e Formatação de Estilos
Writer Interface e Formatação de Estilos INTERFACE É composta pela organização dos menus e atalhos que compõem o programa, que dão acesso às suas funcionalidades. É interessante conhecer a interface de
Universidade de São Paulo
Manual para usuários do site Este manual foi especialmente desenvolvido para os administradores de conteúdo de cada departamento, que terá uma pessoa responsável pelas atualizações das informações departamentais
08. A figura seguinte representa uma tela do Excel XP.
INFORMÁTICA A figura acima mostra uma janela do Windows XP, contendo informações acerca de uma lista de arquivos. Com relação a essa janela e ao Windows XP, responda a questão 01. 01. Ao se clicar o menu,
PAINEL DE CONTROLE LANDS AGÊNCIA WEB. Assim que digitar este endereço e apertar enter, você será redirecionado para esta página:
PAINEL DE CONTROLE LANDS AGÊNCIA WEB O Painel de controle da Lands Agência Web é uma ferramente simples e que facilita a vida do cliente na hora de gerenciar o conteúdo do seu site/blog. Aqui vamos aprender
Volnys Bernal. Introdução à linguagem HTML. Introdução à linguagem HTML. Visão geral. Visão geral. Visão geral. Visão geral.
1 2 Introdução à linguagem HTML Sumário Volnys Borges Bernal Primeira página Principais tags Principais atributos 3 4 HTML HTML = HyperText Markup Language Linguagem de marcação (Markup) para criação de
INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT
v1.1 06/04/2017 INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT AULA 3 TRABALHANDO COM FORMULÁRIOS Eder Franco @ FPF Tech Agenda 1. Introdução 2. A tag form e seu atributos 3. As tags
Dreamweaver CS5 Plano de Aula - 24 Aulas (Aulas de 1 Hora).
4149 - Dreamweaver CS5 Plano de Aula - 24 Aulas (Aulas de 1 Hora). Aula 1 Capítulo 1 - Introdução 1.1. Novidades do Dreamweaver CS5...23 1.2. Área de Trabalho...23 1.2.1. Tela de Boas-vindas...24 1.2.2.
TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo
TECNOLOGIA WEB XHTML Aula 5 Profa. Rosemary Melo HTML (Hiper Text Markup Language) Linguagem de marcação de hipertexto Comum especificar o conteúdo do documento e sua formatação em um só documento HTML.
Obrigado por adquirir o GNOTE da IDEON Brazil, o mais moderno gerenciador de conteúdos da Internet.
Obrigado por adquirir o GNOTE da IDEON Brazil, o mais moderno gerenciador de conteúdos da Internet. Esse manual foi desenvolvido com o intuito de que você use de maneira eficaz os recursos que ele oferece
Usar minigráficos para mostrar tendências de dados
Página 1 de 5 Excel > Planilhas > Exibindo dados Novidade no Microsoft Excel 2010, um minigráfico é um pequeno gráfico em uma célula de planilha que fornece uma representação visual de dados. Use minigráficos
Curso de HTML aula 4. Sumário. 1 Formulários. 1.1 Construindo formulários com o FORM. 1.2 Método:
Sumário 1 Formulários... 1 1.1 Construindo formulários com o FORM... 1 1.2 Método:... 1 1.3 INPUT... 2 2 Outros valores para type... 3 2.1 TYPE="RADIO"... 3 2.2 TYPE="PASSWORD"... 3 2.3 TYPE="CHECKBOX"...
Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Um Formulário é uma área com entrada de dados disponível para o usuário. A ideia básica do formulário é apresentar campos
Plano de Aula - Dreamweaver CS5 - cód Horas/Aula
Plano de Aula - Dreamweaver CS5 - cód.4149 24 Horas/Aula Aula 1 Capítulo 1 - Introdução Aula 2 Continuação do Capítulo 1 - Introdução Aula 3 Capítulo 2 - Site do Dreamweaver 1.1. Novidades do Dreamweaver
Construção de Páginas html com o editor NVU
1 Curso de Formação de Professores em Tecnologia de Informação e de Comunicação Acessível APRESENTAÇÃO CONHEÇA O EDITOR DE PÁGINAS HTML NVU Construção de Páginas html com o editor NVU Crie e edite páginas
5.9 Mídias: Clique no botão de Gerenciador de Mídias, ou acesse o Menu Conteúdo => Gerenciador de Mídias.
5.9 Mídias: Clique no botão de Gerenciador de Mídias, ou acesse o Menu Conteúdo => Gerenciador de Mídias. Observe que na parte superior temos duas formas de visualização: em Miniatura e Exibição Detalhada.
UNIVERSIDADE PAULISTA UNIP
UNIVERSIDADE PAULISTA UNIP INSTITUTO DE CIÊNCIAS SOCIAIS E COMUNICAÇÃO CURSOS SUPERIORES DE GESTÃO TECNOLÓGICA MANUAL DE FORMATAÇÃO DO PIM SÃO PAULO 2011 APRESENTAÇÃO Este Manual tem como objetivo, oferecer
Prof. Fernando Gonçalves Abadia. Sistemas Multimídias
Prof. Fernando Gonçalves Abadia Sistemas Multimídias Títulos Títulos são definidos com as tags a . A define o título maior. A define o título menor. este é um título este
PREFEITURA MUNICIPAL DE BLUMENAU
PREFEITURA MUNICIPAL DE BLUMENAU SECRETARIA MUNICIPAL DE EDUCAÇÃO DIRETORIA DE EDUCAÇÃO BÁSICA GERÊNCIA DE ENSINO FUNDAMENTAL COORDENAÇÃO DE INFORMÁTICA TUTORIAL/MANUAL BÁSICO SOBRE COMO UTILIZAR: Versão
Adobe. Dreamweaver CS4
Adobe Dreamweaver CS4 ÍNDICE CAPÍTULO 1 INICIANDO O DREAMWEAVER... 7 CONHECENDO A TELA DO DREAMWEAVER... 8 CAPÍTULO 2 INICIANDO A CRIAÇÃO DO SITE... 15 REDIMENSIONANDO A JANELA DO DOCUMENTO... 18 INSERINDO
Programação Web - HTML
Instituto Federal de Minas Gerais Campus Ponte Nova Programação Web - HTML Professor: Saulo Henrique Cabral Silva HTML Início em 1980, Tim Bernes-Lee Implementado Pascal. 1989, o CERN investiu esforços
INTRODUÇÃO AO JQUERY PROF. ME. HÉLIO ESPERIDIÃO
INTRODUÇÃO AO JQUERY PROF. ME. HÉLIO ESPERIDIÃO Introdução JQuery é uma biblioteca JavaScript desenvolvida para simplificar os scripts client-side que interagem com o HTML. Ela foi lançada em janeiro de
Na seqüência, será aberta uma página de login de acesso ao ambiente de gerenciamento do portal, conforme ilustrado na figura 01, abaixo: Figura 01
Tutorial Versão1.0 O Manual Tutorial do Apae em Rede pretende orientá-los no gerenciamento de conteúdos do portal. Para darmos início a essa orientação, é preciso acessá-lo. Para tanto, basta digitar intranet.apaebrasil.org.br
INTRODUÇÃO A PROGRAMAÇÃO AVANÇADA PARA WEB E AO HTML. Prof. Msc. Hélio Esperidião
INTRODUÇÃO A PROGRAMAÇÃO AVANÇADA PARA WEB E AO HTML Prof. Msc. Hélio Esperidião NAVEGADOR O navegador também conhecido como web browseré um programa que habilita seus usuários a interagirem com documentos
Manual do Usuário Webmail SoftSul
Manual do Usuário Webmail SoftSul 2 Índice Interface Geral do Webmail 03 Caixa de entrada 04 Opções de apresentação e filtro 05 Os e-mails nos seus estados 06 Marcar um e-mail 07 Acesso a Configurações
Sistemas Enturma: Manual de Utilização do Gerenciador de Páginas
Apresentação O Manual de Gerenciador de Páginas fornece todas as informações necessárias para os usuários tirarem o máximo proveito das ferramentas existentes nas comunidades do sistema Enturma para criação
Introdução a Informática - 1º semestre AULA 05 Prof. André Moraes
Introdução a Informática - 1º semestre AULA 05 Prof. André Moraes Continuação de assunto sobre - Recursos do BrOffice Impress. 8.3 TRANSIÇÃO DE SLIDES A transição de slide é um recurso bastante utilizado
JORNAL PIO-PARDO MANUAL DO USUÁRIO. versão 1.1
JORNAL PIO-PARDO MANUAL DO USUÁRIO versão 1.1 INTRODUÇÃO Este é um manual do usuário de como publicar uma notícia no portal de notícias do Jornal Pio Pardo. Logo em seguida será apresentado o passo-a-passo.
MANUAL DO ADMINISTRATOR
MANUAL DO ADMINISTRATOR Sumário Introdução... 3 Estrutura e sua função... 3 Conceituação de itens do cabeçalho... 3 Acessibilidade... 4 Menu de Administração... 4 Criação de artigos... 6 Criação de Menu...
Manual Converte-MV S_Line
Sumário 1. Introdução... 2 2. Novo Cliente... 2 2.1. Inserir Dados... 2 2.2. Login... 2 3. Configuração Inicial... 2 3.1 Parâmetros de Conversão... 2 3.1.1. Conversão para o padrão S_Line...3 3.1.2. Responsável