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.
|
|
|
- Mônica Ferrão Raminhos
- 6 Há anos
- Visualizações:
Transcrição
1 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 organização em diversas seções, de maneira criativa, é devido aos frames, que é o assunto desta nossa aula! Objetivos: Nesta aula você: Aprenderá os conceitos de frames. Compreenderá as formas de dividir uma janela. Conhecerá os atributos de frameset e frames. Saberá como abrir documentos em um frame. Aprenderá o significado dos nomes especiais: _blank, _self, _parent, e _top. Conhecerá os frames inline. 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. A tradução usual de layout é de: desenho, plano, ou esquema. O termo também é usado para designar a disposição de alguma coisa em determinado lugar. Ambos os significados não definem completamente todo seu sentido, neste contexto mais específico de HTML em Informática. Layout (que se lê: leiaute) aqui significa mais precisamente: um arquivo que estará mostrando a distribuição física e o tamanho dos elementos independentes de determinada página. 1. Aspectos Gerais dos Frames Uma forma de posicionar os elementos e dividir o espaço de uma janela é através dos frames. Este recurso permite dividir a janela do navegador em várias áreas independentes (chamadas frames) e em cada uma destas áreas pode ser carregado e visualizado um arquivo HTML diferente. Cada frame é totalmente independente dos demais, o que permite que o conteúdo de um possa ser rolado ou trocado sem afetar os outros. Esta independência torna este recurso ideal para a criação de menus. A construção de uma página dividida em frames envolve, além dos arquivos que serão exibidos em cada frame, a criação de um arquivo extra para definir a disposição e o tamanho ocupado por cada área da janela. Este arquivo extra é chamado de arquivo de layout. Um arquivo de layout é um documento HTML, onde a tag <BODY> é substituída pela tag <FRAMESET>. Este arquivo tem o seguinte formato: Frames Horizontais <FRAMESET ROWS= 50%, 50% > <FRAME SRC=... NAME=...> <FRAME SRC=... NAME=...> <NOFRAMES> </NOFRAMES> 1
2 O arquivo de layout do exemplo fará com que a janela seja dividida horizontalmente ao meio, como mostrado na figura 6.1 a seguir: Figura 6.1- Janela horizontalmente dividida em dois frames 2. Atributos de <FRAMESET> A tabela que segue resume os atributos de definição do conjunto de frames (a tag FRAMESET). Tabela Descrição dos atributos de <frameset> Atributo Descrição ROWS Número e altura de cada linha dos frames COLS Número e largura de cada coluna dos frames BORDER Largura da borda do frame BORDERCOLOR Cor da borda do frame Os frames são dispostos na janela do navegador na forma de linhas e colunas, como em uma tabela. Os atributos ROWS e COLS servem para definir desta forma (ROWS para linhas e COLS para colunas) o número de frames e o tamanho (altura para ROWS e largura para COLS) ocupado por cada um dos frames. O formato deste atributo é ROWS= v,v,... ou COLS= v,v,..., onde v indica o valor, que pode ser descrito de 3 formas: o tamanho exato em pixels, um percentual do tamanho da janela, e uma porção do espaço ainda não ocupado da janela. No primeiro caso, v é um número indicando a altura ou a largura em pixels de cada frame. Por exemplo: ROWS= 100,50,200 define 3 frames que aparecem dividindo a tela em três áreas dispostas lado a lado (como linhas de uma tabela): o primeiro com a altura de 100 pontos, o segundo de 50 e o terceiro de 200 pontos. No segundo caso, v é descrito como um percentual, indicando a altura ou largura dos frames em função do tamanho da janela do navegador. Ex.: COLS= 30%,20%, 50% define 3 frames dividindo a janela do navegador em colunas, onde o primeiro ocupa 30% da largura total, o segundo 20% e o terceiro 50%. Nas formas relativas, o caracter * tem função especial. Assume um valor em função da área ainda não usada da janela. Pode aparecer sozinho ou precedido de um número. Se * aparece sem número na frente está indicando a altura ou largura relativa aos demais valores definidos em função do restante da tela. Por 2
3 exemplo: COLS= 30%,20%,*,* define 4 frames dispostos em colunas: o primeiro ocupa 30% da largura da janela, o segundo 20%, o terceiro e o quarto dividem os 50% restantes, ficando cada um com 25%. Um número n seguido do caracter *, indica que um frame ocupará n vezes o espaço ocupado pelos demais frames definidos relativamente. Ex.: ROWS= 40%,2*,* define 3 frames (como linhas da tela do navegador), o primeiro ocupa 40% da altura da tela, o restante da tela (isto é: 60%) será dividido por 3 (já que há 2*+ 1*=3*), isto é, em partes de 20% da tela. Desta parte restante, o segundo frame ocupará 40% (2* da altura restante) e o terceiro 20% (1* da altura restante). O atributo BORDER permite atribuir um valor para a largura da borda e o atributo BORDERCOLOR permite mudar a sua cor. Os valores destes dois atributos são definidos da mesma forma que os atributos semelhantes de tabelas (vistos na aula passada). 3. Frames dentro de Frames Neste ponto da aula, você pode estar imaginando que dividir a janela apenas em linhas ou colunas não permite grande liberdade de criação. Além disso, possivelmente, você já encontrou páginas com divisões mais complexas que puramente linhas ou colunas. É possível criar layouts mais sofisticados, pois a tag <frameset> aceita em seu interior, além das tags <frame>, outras tags <frameset>. Este recurso é chamado de framesets aninhados. No exemplo a seguir, inicialmente, dividimos a janela em duas colunas para posteriormente dividir a coluna da direita em duas linhas: Framesets Aninhados <FRAMESET COLS= 50%, 50% > <FRAMESET ROWS= 50%, 50% > O arquivo de layout que acabamos de ver produziria o efeito na janela mostrado na figura
4 Figura Divisão em 2 colunas e posterior divisão da coluna direita em duas linhas Outro layout bem comum envolvendo framesets aninhados, seria dividir a janela em duas linhas, para em seguida dividir a linha de baixo em duas colunas. O código HTML a seguir mostra como isso pode ser feito: Framesets Aninhados <FRAMESET ROWS= 60,* > <FRAMESET COLS= 150,* > O arquivo de layout que acabamos de ver produziria o efeito na janela, que é mostrado na figura 6.3. Figura Exemplo de uso de "*" 4. Atributos de FRAME A tag frame pode aceitar os vários atributos que são mostrados na tabela
5 Tabela Descrição dos atributos de <frame> Atributos Descrição SRC Arquivo inicialmente mostrado no frame NAME Nome associado ao frame SCROLLING Indica se o frame será rolável (yes ou no) NORESIZE Indica que o usuário não pode mudar de tamanho do frame MARGINHEIGHT Altura da margem do frame MARGINWIDTH Largura da margem do frame O atributo SRC indica qual documento HTML será exibido no frame após o carregamento do arquivo de layout. Para exibir posteriormente um novo documento num frame é necessário que isso seja resultado da seleção de um link. É possível indicar que a URL referenciada num link seja exibida em um determinado frame. Isto é feito através da definição do atributo TARGET da tag <A>...</A> vista anteriormente. O codifico: define um espaçamento no texto, estes e outros códigos especiais de HTML podem ser encontrados na lista do final desta aula. No exemplo a seguir, vemos o código do arquivo menu.html onde foram definidos dois links. A seleção de "primeiro link" faz com que o documento f1.html seja exibido no frame "esq". Já a seleção do segundo link faz com que o documento f2.html seja exibido no frame "dir": f1 a esquerda e f2 a direita <BODY> <DIV ALIGN=center> <A HREF="f1.html" TARGET="esq"> primeiro link</a> <A HREF="f2.html" TARGET="dir"> segundo link</a> </DIV> </BODY> Para que o navegador saiba quais são os frames "dir" e "esq" é necessário atribuir nomes a eles. Isso é feito através da inclusão do atributo NAME da tag. A seguir é mostrado o arquivo de layout que divide a janela em 3 áreas: uma linha onde foi carregado o arquivo menu.html e duas colunas chamadas de "dir" e "esq": Links para 2 frames <FRAMESET ROWS= 60,* > <FRAME SRC= menu.html > <FRAMESET COLS= *,* > <FRAME NAME= esq > 5
6 <FRAME NAME= dir > A combinação de arquivos que acabamos de ver produziria o efeito mostrado na figura 6.4, na janela *. Figura Janela * gerada pelo código anterior Como nas células de uma tabela, há atributos para definir uma margem dentro da qual o documento vai ser exibido. O atributo MARGINHEIGHT serve para definir a altura da margem. O atributo MARGINWIDTH serve para definir a largura da margem. O atributo SCROLLING permite controlar a exibição da barra de rolagem vertical do frame: o valor yes faz com que a barra de rolagem esteja sempre visível, o valor no faz com que ela nunca seja exibida e o valor auto (default) faz com que ela seja exibida apenas se necessário. O usuário pode, a qualquer momento, modificar o tamanho inicial do frame, a menos que o atributo NORESIZE seja definido. Como todo recurso novo que é incorporado à linguagem HTML, é necessário manter a compatibilidade do documento com os navegadores antigos, que ainda não implementam o recurso. Isso se tornou especialmente problemático quando surgiram os frames, pois, carregar um arquivo de layout num navegador antigo poderia mostrar ao usuário uma página completamente vazia. Para dar uma satisfação aos utilizadores de navegadores que não suportam frames, existe a tag <NOFRAMES>... </NOFRAMES>. Os navegadores mais antigos só vão interpretar o que há dentro desta tag e os mais novos vão ignorá-la. Ela deve ser incluída no fim do arquivo de layout com um código HTML alternativo ao código contendo frames, como no exemplo a seguir: Arquivo com HTML alternativo <FRAMESET> <FRAME NAME= esquerdo > <FRAME NAME= direito > <NOFRAMES> Utilize um browser que suporte Frames para ver bem esta página. 6
7 </NOFRAMES> 5. Nomes Especiais no TARGET Existem alguns nomes especiais que podem ser utilizados no atributo TARGET. Estes são: _blank, _self, _parent,e _top. O nome _blank faz com que o documento HTML seja carregado numa nova janela do navegador. Isto é particularmente desejável quando se faz referências a um documento de um outro site. Desta forma, a página anterior continua sendo visível. O nome _self indica que o novo documento será carregado no mesmo frame onde está a página com o link que causou sua exibição. Na maior parte das vezes, este nome é desnecessário, pois este é o comportamento padrão. Para compreender os nomes _parent e _top é necessário imaginar uma organização mais complicada do que a que temos visto até agora. O arquivo de layout a seguir divide a janela em 3 frames: Janela dividida em 3 <FRAMESET ROWS= 60,* > <FRAME NAME= sup > <FRAMESET COLS= *,* > <FRAME SRC= lay.htm NAME=esq> <FRAME NAME=dir> Apesar do arquivo de layout anterior ter apenas 3 tags frames é possível dividir mais ainda a janela se o arquivo lay.htm for também um arquivo de layout, cujo código poderia ser por exemplo: Arquivo lay.htm <FRAMESET ROWS= *,* > <FRAME SRC= menulay.htm NAME=esqsup> <FRAME NAME=esqinf> Se o arquivo menulay.htm tivesse o seguinte código: 7
8 Arquivo menulay.htm <BODY> <A HREF= f.htm TARGET=_top> No Topo</A><BR> <A HREF= f.htm TARGET=_parent> No Pai</A> </BODY> A combinação de arquivos que acabamos de ver produziria o efeito na janela vista na figura 6.5. Figura 6.5- Resultado da janela obtida pelos arquivos lay.htm e menulay.htm Como podemos observar neste exemplo, temos 2 arquivos de layout na janela: o principal que ocupa a janela toda e aquele que está em lay.htm que ocupa o frame chamado esq. A página que contém os links foi aberta a partir do segundo arquivo de layout. A seleção do link cujo TARGET é _top vai fazer com que o arquivo f.htm seja aberto no lugar onde foi aberto o arquivo de layout principal (o topo da hierarquia), ou seja, ocupando a janela toda. Já a seleção do link cujo TARGET é _parent vai fazer com que o arquivo f.htm seja aberto no lugar onde foi aberto o arquivo de layout. Este causou a abertura do arquivo que contém o link (o arquivo de layout mais próximo da hierarquia), ou seja, ocupando o frame de nome esq. 8
9 6. Frames inline A linguagem HTML comporta uma outra forma de criar um frame que apenas na versão 6.0 passou a também ser implementada pela Netscape: frames inline. Estes frames são incluídos num arquivo HTML através da tag <IFRAME> e não necessitam de arquivo de layout, ou seja, ficam misturados às tags de um arquivo comum. Salvo por esta particularidade, seu comportamento em relação à página é idêntico ao comportamento de um frame comum, aceitando os mesmos tipos de atributos. As linha de código abaixo exemplificam isso. Elas permitem que a imagem do animal selecionado pelo usuário seja mostrado em uma janela. As imagens de cada animal estão nos arquivos elefante.jpg, girafa.jpg, crocodilo.jpg e hipopotamo.jpg no diretório imagens. Repare que <iframe> introduz uma simplicidade maior ao possibilitar que um único arquivo controle tudo. <head> <title>frames Inline</title> </head> <body bgcolor=lightgreen> <table align=center cellspacing=10> <tr> <td><h2>frames Inline</h2></td> </tr> <tr> <th height=40 bgcolor=white> <a href="imagens/elefante.jpg" target=imagem>elefante</a> </th> <iframe src="" name=imagem></iframe> <tr> <th height=40 bgcolor=white> <a href="imagens/girafa.jpg" target=imagem>girafa</a> </th> </tr> <tr> <th height=40 bgcolor=white> <a href="imagens/crocodilo.jpg" target=imagem>crocodilo</a> </th> </tr> <tr> <th height=40 bgcolor=white> <a href="imagens/hipopotamo.jpg" target=imagem>hipopotamo</a> </th> </tr> </table> </body> 9
10 Figura Resultado da implementação das linhas de código anteriores Exercícios: 1. Utilize frames, no exercício 3 da aula 2, de modo que o exercício tenha 2 frames: um à esquerda ocupando 30% e outro à direita ocupando 70% da página. Faça o frame da esquerda funcionar como menu e o da direita mostrar os itens selecionados pelo usuário. 2. Modifique agora o exercício anterior para que ao invés de mostrar um arquivo no frame da direita, a seleção de um item produza a abertura deste arquivo em uma nova página. Resumo: Nesta aula, você aprendeu a estrutura básica dos frames na linguagem HTML, como estruturar a forma como eles aparecem em um documento, o seu layout, o seu conteúdo e a tratar formas alternativas de representação no caso do navegador não tratá-los. Fez uso deste recurso em uma página com menu e testou seus novos conhecimentos nos exercícios. Auto-avaliação: Você concluiu com sucesso os exercícios? Então está pronto para utilizar esse recurso em qualquer página, mas nunca exagere, uma página cheia de frames fica muito pesada! Se não está bem seguro, já sabe o que deve fazer, não? Isso mesmo! Leia o texto novamente e refaça os exercícios e 10
11 aí sim estará pronto para os formulários, que é o assunto da próxima aula. 11
HTML Página 23. Índice
PARTE - 4 HTML Página 23 Índice HTML - Frames... 24 Exemplo:... 24 Parâmetros utilizados para a marcação ... 25 Composições com Frames... 25 Exemplo 1.... 26 Exemplo 4.... 26 Parâmetros que Completam
Frames. Documentos de Layout Documentos de Conteúdo
Frames Através da utilização de frames, a janela de um browser pode ser dividida em diversas partes. Cada uma dessas partes é chamada de frame. Cada frame pode ser manipulado separadamente e contém um
Geralmente uma página com frames é constituída por dois ou três elementos básicos:
Objectivos da actividade: Frames Exemplos de frames Com 2 ficheiros Com 3 ficheiros 2 colunas 2 linhas 2 colunas a 2a. com 2 linhas 2 linhas a 2a. com 2 colunas Geralmente uma página com frames é constituída
HTML HTML. Centro de Form. Profissional de Alverca Formador: Cosmin Constantinescu 1
HTML Sessão 9 HTML Quem já navegou um pouco pela Internet com certeza já encontrou páginas em que, por exemplo, existe um menu estático no lado esquerdo do ecrã e o conteúdo do lado direito é que vai mudando.
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
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
Linguagem HTML: Frames
Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de maio de 2012 Aula de Hoje Divisão da janela em partes para exibir várias páginas
Como criar um conjunto de subjanelas com três documentos dispostos na vertical
Mollduras ("frames") As molduras ("frames") são subjanelas definidas sobre a janela principal do browser. Estas subjanelas são criadas dividindo a janela em várias partes. Cada uma dessas partes pode apresentar
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
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
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
Desenvolvimento web I Aula 6 - Frames
Desenvolvimento web I Aula 6 - Frames Prof.: Marlon Marcon 28/03/2011 1 Frames As molduras ("frames") são subjanelas denidas sobre a janela principal do browser. Estas subjanelas são criadas dividindo
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
Programação Na Web. Molduras HTML. Agenda
Programação Na Web HTML 1 António Gonçalves Agenda Vantagens e desvantagens do uso de molduras Modelo de uma FRAME Definição de linhas e colunas num FRAMESET Atributos mais utilizados numa FRAME e FRAMESET
Links, Imagens e Tabelas
Links, Imagens e Tabelas Criar um link em um texto significa estabelecer uma ligação com outra página, outro texto, que o leitor pode abrir clicando numa palavra, grupo de palavras ou em uma imagem. Para
<CENTER> <iframe src="http://www.universo.edu.br" width=740 height=255> </iframe> </CENTER>
6.4 iframes: Outra maneira mais elegante de inserir outras páginas dentro de nossos documentos HTML é através do comando . Nesse caso, devemos especificar o tamanho do espaço que deverá ser aberto
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
Programação para Web HTML - Parte 2
Programação para Web HTML - Parte 2 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, 2 de março
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
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
Síntese da aula anterior
Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações Foi também disponibilizado um formulário de ajuda em html com as tags principais Sítio da aula anterior: http://www.marcosoares.com/aia/11/aula_2010_04_16/
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
Programação para Internet
Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos
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
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
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
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
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
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
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
Tabelas. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, etc. <table> <tr>
Tabelas HTML Tabelas Tabelas São definidas pela tag Uma tabela é dividida em linhas -com a tag Cada linha divida em células de dados (com a tag ). As letras td são um acronimo
HyperText Markup Language HTML. Tabela
HyperText Markup Language HTML Tabela Prof. Luis Nícolas de morim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Tabela consiste em uma estrutura de
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,
Tabelas. table <table>...</table>
Tabelas table ... Explicação: Indica o início e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas - linhas e células - somente serão consideradas se incluidas
Linguagem XHTML -Aula 3 Cleverton Hentz
Linguagem XHTML -Aula 3 Cleverton Hentz Sumário da Aula Tags Básicas da Linguagem Lista Ordenadas e não ordenadas Imagens, Links e Âncoras 2 Tags Básicas: Trabalhando com Texto Existem algumas tags que
PROGRAMAÇÃO PARA INTERNET. Prof.: Jean Carlo Mendes
PROGRAMAÇÃO PARA INTERNET Prof.: Jean Carlo Mendes carlomendes@yahoo.com.br http://www.jeancarlomendes.com.br HTML Tabelas - As tabelas em HTML são criadas através das tags e - Algumas
HTML Página 36. Índice
PARTE - 6 HTML Página 36 Índice Tabelas... 37 Construindo tabelas Marcação TABLE... 37 Título da Tabela Marcação CAPTION... 37 Cabeçalho da tabela (table headings) Marcação TH... 37 Dados da tabela (table
Introdução ao HTML André Luiz Silva de Moraes Instituto Federal de Santa Catarina
Introdução ao HTML André Luiz Silva de Moraes Hypertext Markup Language Linguagem de Marcação de Hipertexto Padroniza a Escrita do texto Permite que um navegador reconheça elementos para inserir em uma
O elemento para definição de uma tabela é <TABLE> sendo finalizada com </TABLE>. Este elemento prevê sub-elementos para sua composição.
HTML Tabelas O elemento para definição de uma tabela é sendo finalizada com. Este elemento prevê sub-elementos para sua composição. 1. Sub-elemento Título O título de uma tabela é definido pela
Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Frames São janelas que podem conter páginas Web. Uma janela pode ser subdividida em várias subjanelas, cada uma, visualizando
Implementando e manipulando Tabelas
Implementando e manipulando Tabelas Aplicações para Web I 31/03/2016 Tiago Alves de Oliveira - tiagofga@gmail.com 1 Tabelas As tags utilizadas para a criação de tabelas A utilização de tabelas permite
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,
Aula 3. Imagens. <img src="foto.jpg" />
Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag
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,
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
Iniciando Layouts. No html5 existem algumas tags padrões para se iniciar Layouts. Estrutura Básica:
Aula 09 Iniciando Layouts No html5 existem algumas tags padrões para se iniciar Layouts. Estrutura Básica: header: é onde definimos o cabeçalho. nav: é onde definimos o menu ou a navegação do nosso site.
INTRODUÇÃO AO DESENVOLVIMENTO WEB
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Tabelas A tag permite a criação de tabelas com linhas e colunas Tabelas devem ser utilizadas para organizar e apresentar dados
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
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,
Criação de estilos CSS
Em primeiro lugar vamos inserir um parágrafo Marco Soares 1 Criação de estilos CSS Para começar, crie um site novo e uma página inicial para testes chamada index.html Vamos começar por criar alguns estilos
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
Capítulo 9 - Imagens. Imagens
Capítulo 9 - Imagens 9 Imagens EM JAVASCRIPT, É POSSÍVEL MANIPULAR COM AS IMAGENS DE UMA PÁGINA, alterando a URL que localiza o arquivo de imagem. Assim, pode-se trocar a imagem que está sendo exibida
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
GUIA DE INÍCIO RÁPIDO
Versão 2.00 Junho de 2016 Índice 1 Introdução... 3 2 Viewer Edition... 3 2.1 Barra de menu... 4 2.2 Curva ABC... 11 2.3 Áreas de pivoteamento... 12 3 Personal Edition... 12 3.1 Barra de menu... 13 www.bxbsoft.com.br
UFCD 0793 Scripts CGI e Folhas de Estilo Formadora: Sónia Rodrigues
UFCD 0793 Scripts CGI e Folhas de Estilo Formadora: Sónia Rodrigues 0793 Scripts CGI e folhas de estilo Objectivos da UFCD: Desenvolver páginas para a Web, através de scripts CGI e folhas de estilo. UFCD
TECNOLOGIA WEB CRIANDO TABELAS
TECNOLOGIA WEB CRIANDO TABELAS USANDO UM ARQUIVO CSS ATRAVÉS DE UM LINK INTERNO DIGITE O CÓDIGO ABAIXO no bloco de notas, Notepad++ ou no amaya: OBS. 01: Em vermelho temos os comentários do código e em
2017/09/05 19:16 1/6 3 Telas
2017/09/05 19:16 1/6 3 Telas 3 Telas Visão geral O recurso de telas do Zabbix tem por objetivo possibilitar a agregação de dados de várias fontes em uma visualização rápida na mesma página. A sua construção
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
Ao projeto inciado na aula anterior, faça as seguintes alterações:
Atividade 4 Ao projeto inciado na aula anterior, faça as seguintes alterações: 1. Insira uma cor de fundo na página. 2. Google fonts Se nos basearmos apenas nas fontes que o usuário terá instaladas em
Paradigmas de Programação React Native
Paradigmas de Programação React Native : Layout React Native justify-content / align-items / flex-direction Gil Eduardo de Andrade Introdução: O Flexbox (CSS Flexible Box Layout Model) tem como objetivo
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;
Parte IV Como projetar um layout de página
Parte IV Como projetar um layout de página Parte IV Utilize as ferramentas de projetos visuais do Dreamweaver para criar layouts de página sofisticados. Esta seção contém os seguintes capítulos: Capítulo
<title>introdução a HTML</title>
introdução a HTML programação para a Internet prof. Vilson Heck Junior O que é HTML Hypertext Markup Language: Linguagem de Marcação de Hipertexto; É uma coleção de TAGs
HTML, CSS e JavaScript
HTML, CSS e JavaScript Contato: Site: http://professores.chapeco.ifsc.edu.br/lara/ 1 Arquivo externo Dentro da tag head: 2 Qual a dirença
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
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
AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos
AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema
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.
HTML. Frames e FORMs
HTML Frames e FORMs Frames As frames são divisões do ecrã do browser em diversas janelas (ou quadros ). Torna-se assim possível apresentar mais do que uma página numa janela do browser. É muito fácil colocar
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
Voltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções.
13. Editor de leiautes Voltado para novos usuários, este capítulo fornece uma instrução para edição de Leiaute do SILAS e suas funções. Neste capítulo uma breve explicação será apresentada sobre a organização
CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML
INICIO DE HTML Neste tutorial usaremos o já conhecido Notepad++ ou Bloco de Notas e um Browser (Chrome, Mozilla ou Internet Explorer). Para nossos exemplos usaremos o Chrome. A estrutura básica de uma
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
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
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
Introdução 1 PARTE I: A LINGUAGEM DA WEB 5
Sumário Introdução 1 PARTE I: A LINGUAGEM DA WEB 5 Capítulo 1: Introdução a HTML5 7 Criando com tags: um panorama 8 Incorporando os novos elementos de HTML5 9 Usando tags válidas de HTML4 11 Esquecendo
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:
Internet & HTML Internet & HTML Pedro Costa / 2004
Internet & HTML Pedro Costa / 2004 Como funcionam as páginas Web As páginas web são apenas constituídas por texto ASCII plano. Os Web browsers processam o código usado nas páginas web para mostrarem uma
JavaScript Exercício Comportamentos Dinâmicos
JavaScript Exercício Comportamentos Dinâmicos Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar um exemplo simples
Maurício Samy Silva. Novatec
Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20
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
Aula 11 Introdução ao Java Script
Aula 11 Introdução ao Java Script Java Script é uma linguagem que permite trabalhar com a Lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se
Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível
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,
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
Desenvolvimento Web. Professor: Bruno E. G. Gomes
Instituto Federal de Educação Ciência e Tecnologia Curso Técnico Integrado em Informática Campus Currais Novos Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno E. G. Gomes 2013 Introdução
CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira
![CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira](/thumbs/68/59560005.jpg "CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira")
Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário
Treinamento em HTML. Índice
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
Desenvolvimento de Aplicações para Internet
Desenvolvimento de Aplicações para Internet CSS Celso Olivete Júnior olivete@fct.unesp.br HTML Formatando o documento... Formulário Responsável por fazer a interação entre os dados fornecidos pelo usuário
<HTML5> Autor: Fernando Vaz de Lima Pereira
Autor: Fernando Vaz de Lima Pereira 4 Multimídia Os elementos de multimídia possuem grande relevância na estrutura de um site ou página de internet. Além de tornar o conteúdo mais dinâmico com
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
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar tabelas 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
Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho
Fábio Borges de Oliveira. HTML HyperText Markup Language
Fábio Borges de Oliveira HTML HyperText Markup Language Iniciando Código É a primeira tag de um documento HTML, nas primeiras versões dos browsers essa tag era obrigatória. Propriedade que
IFSC/Florianópolis - Prof. Herval Daminelli
Linguagem de marcação de textos; HTML significa Hypertext Markup Language (linguagem de marcação de hipertexto); Composta por elementos chamados tags ou rótulos ou marcadores; Estes marcadores definem
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
Como criar um menu pop-up no Dreamweaver
Como criar um menu pop-up no Dreamweaver Introdução: Seguindo o crescimento do conteúdo em sites de Internet, a necessidade por uma fácil navegação nas páginas cresce igualmente. Um menu pop-up pode ser
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