2 HTML Inserindo objetos
|
|
- Maria Vitória Lemos Canejo
- 8 Há anos
- Visualizações:
Transcrição
1 2 HTML Inserindo objetos Vinicius A. de Souza São José dos Campos,
2 Sumário Desenvolvimento Web Imagem...3 Links...5 Links para locais da mesma página...6 Áudio e vídeo...8 Som de fundo...8 Player de áudio/vídeo...8 Atributos da tag <EMBED>...9 Letreiro...9 Principais atributos da tag <MARQUEE>...9 Atividade A Marquee com fotos...13 Atividade B - Menu flutuante...14 Atividade C Desenvolvimemento de site...14 São José dos Campos,
3 Imagem A tag utilizada para inserirmos uma imagem em uma página web é <IMG>, onde necessitaremos também do atributo SRC para fornecer o endereço (diretório) da imagem. Sua sintaxe geral é: <IMG SRC= endereço da imagem.extensão ></IMG> No exemplo abaixo, colocamos uma imagem chamada choque.gif na página web. Certifique-se de que esta imagem existe e está localizada no mesmo diretório que a página. <HEAD> <TITLE> Desenvolvimento Web</TITLE> <H2>Colocando imagem</h2> <IMG SRC= choque.gif ></IMG> Os atributos que poderão ser utilizados junto à tag <IMG> são: a) Alinhamento <IMG SRC="imagem" ALIGN="alinhamento"></IMG> Este atributo especifica o tipo de alinhamento entre a imagem e o texto da página. As opções de alinhamento são: LEFT, RIGHT, TOP, TEXTOP, MIDDLE, ABSMIDDLE, BASELINE, BOTTOM, ABSBOTTOM e CENTER. b) Borda <IMG SRC="imagem" BORDER="valor"></IMG> Este atributo determina a espessura da borda da imagem. No caso de uma imagem sem bordas, este atributo não precisa ser colocado. São José dos Campos,
4 c) Altura e largura <IMG SRC="imagem" WIDTH="largura" HEIGHT="altura"></IMG> Estes atributos especificam a largura e a altura da imagem. Podem ser dados os valores em pixels ou serem proporcionais ao tamanho que a figura ocupará na página. Uma figura com dimensões proporcionais às vezes pode aparecer repuxada na página. Exemplos: <IMG SRC="choque.gif" WIDTH="333" HEIGHT="200"></IMG> <IMG SRC="choque.gif" WIDTH="100%" HEIGHT="20%"></IMG> d) Texto explicativo <IMG SRC="imagem" ALT="texto descritivo"></img> O atributo ALT exibe uma descrição quando o cursor move-se sobre a imagem. Existem usuários que utilizam navegadores incapazes de exibir imagens ou ajustam o navegador para não carregar imediatamente às imagens, devido á demora no carregamento das páginas. O texto alternativo possibilita que saibam do que se trata a imagem mesmo antes que sejam carregadas. e) Espaços vertical e horizontal <IMG SRC="imagem" VSPACE="valor" HSPACE="valor"></IMG> Especifica o espaço vertical (VSPACE) e o espaço horizontal (HSPACE) que pode aparecer entre a imagem e o texto mais próximo ou até mesmo para outra imagem na linha corrente. O valor é dado em pixels. Exemplos: <IMG SRC="choque.gif" HSPACE="0" VSPACE="0"> </IMG> <IMG SRC="choque.gif" HSPACE="30" VSPACE="30"> </IMG> Abaixo, é mostrado um exemplo de utilização da imagem. Copie o código abaixo para sua página e aproveite para modificar os atributos da tag IMG, testando novas possibilidades. Não se esqueça de configurar corretamente o endereço da imagem que será inserida. São José dos Campos,
5 <HEAD> <TITLE> Desenvolvimento Web</TITLE> <IMG SRC= relogio.jpg ALIGN= left BORDER=3 HSPACE=10></IMG> <P> A HTML (HyperText Markup Language) é uma linguagem de marcação baseada em texto utilizada para escrevermos páginas que serão lidas por navegadores web. Simplificando, é uma linguagem para escrever páginas web. Para escrevermos páginas, é necessário apenas um editor de texto. </P> <BR></BR> <BR></BR> <IMG SRC= relogio.jpg ALT= Teste WIDTH="300" HEIGHT="200"></IMG> <P> A HTML (HyperText Markup Language) é uma linguagem de marcação baseada em texto utilizada para escrevermos páginas que serão lidas por navegadores web. Simplificando, é uma linguagem para escrever páginas web. Para escrevermos páginas, é necessário apenas um editor de texto. </P> Atividade 1: Teste outros valores para os atributos da tag <IMG>. Links Um dos principais diferenciais da internet m relação às outras mídias é o conceito de hipertexto, ou seja, é possível criarmos um documento que se vincula a outros documentos por meio de ligações especiais chamadas links (ou hiperlinks). Portanto, é possível criarmos links para páginas do nosso próprio site, páginas externas ao nosso site ou até mesmo arquivos (que ficarão, neste caso, disponíveis para download), além de um link para envio de . Iremos criar um link utilizando a tag <A>, juntamente com o atributo HREF. <A HREF= endereço da página >Texto exibido</a> São José dos Campos,
6 Abaixo, vamos criar três exemplos de links um externo, outro interno e um link para um arquivo. O primeiro link nos direciona para o buscador Google. O segundo link abre uma página de nosso próprio site, por isso, assegure-se de que exista uma página chamada contato.html no mesmo diretório de sua página de teste abaixo. O terceiro link criado com o atributo href= mailto..., na verdade, abre o cliente de padrão do computador do usuário e adiciona ao destinatário da mensagem o endereço citado. <HEAD> <TITLE> Desenvolvimento Web</TITLE> <A HREF= >Google</A><BR></BR> <A HREF= contato.html >Contato</A><BR></BR> <A HREF= Aula2.pdf >Download da Aula 2</A><BR></BR> <A HREF="mailto:va.vinicius@gmail.com">Fale Conosco</A> Observações: Ao criar um link para um site externo, coloque sempre o endereço completo, inclusive o protocolo, como por exemplo, Ao criar um link para uma página de seu próprio site, verifique em qual diretório a página referenciada se encontra. Por exemplo, suponha que o arquivo Aula2.pdf do exemplo acima esteja numa pasta chamada arquivos. Portanto, o link ficaria desta maneira: <A HREF= arquivos/contato.html >Contato</A>. Atividade 2: Crie um link para um determinado site a partir de uma imagem (pode ser o logotipo deste site). Links para locais da mesma página Existem situações onde os links podem levar a locais diferentes dentro da mesma página onde estão inseridos. Neste caso, o link é conhecido como BOOKMARKS. Além de se especificar a referência ao arquivo destino dentro do marcador âncora, é preciso determinar os locais da página que servirão de destino para o link. Isto é feito da seguinte maneira: Cada local destino de um link dentro da página recebe um marcador âncora, onde é atribuído um nome a este marcador; O link que irá levar até este marcador precisa referenciá-lo dentro do atributo HREF. Exemplo: Criando um destino dentro da página index.html: São José dos Campos,
7 <A ID="inferior"></A> Agora criaremos um link para este destino: <A HREF="index.html#inferior">Clique para ver o fim</a> Construa o exemplo abaixo para testar (assegure-se de nomear esta página com o nome index.html): <HEAD> <TITLE> Desenvolvimento Web</TITLE> <A HREF= index.html#inferior >Fim do texto</a> <P> A HTML (HyperText Markup Language) é uma linguagem de marcação baseada em texto utilizada para escrevermos páginas que serão lidas por navegadores web. Simplificando, é uma linguagem para escrever páginas web. Para escrevermos páginas, é necessário apenas um editor de texto. </P> <BR></BR><BR></BR><BR></BR><BR></BR><BR></BR><BR></BR><BR></BR><BR ></BR><BR></BR><BR></BR><BR></BR><BR></BR><BR></BR><BR></BR><BR></ BR><BR></BR><BR></BR><BR></BR><BR></BR><BR></BR><BR></BR><BR></BR> <BR></BR><BR></BR><BR></BR><BR></BR><BR></BR> <P> A HTML (HyperText Markup Language) é uma linguagem de marcação baseada em texto utilizada para escrevermos páginas que serão lidas por navegadores web. Simplificando, é uma linguagem para escrever páginas web. Para escrevermos páginas, é necessário apenas um editor de texto. </P> <A ID= inferior ></A> <A href= # >Inicio do texto</a> São José dos Campos,
8 Áudio e vídeo O usuário somente poderá ouvir som em uma página se seu browser possuir recursos necessários à execução do respectivo formato de arquivo. Os arquivos MIDI e WAV geralmente são suportados pelos browsers. Já os arquivos em formato MP3 e o Real Áudio requerem instalação, de plug-in, caso o browser não possua. Uma página que contenha arquivos de som precisa ficar hospedada em um servidor devidamente configurado para aceitar tais arquivos. Caso contrário, quando o usuário clicar em links de acesso aos arquivos sonoros será exibida uma página contendo uma série de caracteres estranhos. O mesmo ocorre para os videos. Som de fundo Para colocar um som de fundo em sua página, use a tag <BGSOUND> dentro da tag <HEAD> ou da tag, como mostra o exemplo abaixo. <html> <head> </head> </html> <title> Som de fundo </title> <BGSOUND SRC="musica.wma" LOOP=" 1"> <body> <p>escute a música de fundo!!! </p> </body> Observação: O atributo LOOP=-1 indica que o som ficará executando indefinidamente. Player de áudio/vídeo Para inserir um player de música ou vídeo em sua página html, use a tag <EMBED> juntamente com o atributo SRC, que receberá o endereço do arquivo. <EMBED SRC="arquivo de som/video" WIDTH="valor" HEIGHT="valor" AUTOSTART="true/false" LOOP="opção"> Veja o exemplo abaixo: São José dos Campos,
9 <HEAD> <TITLE>Desenvolvimento web</title> <P>Escute a musica</p> <EMBED SRC="musica.mp3" WIDTH="400" HEIGTH="450" AUTOSTART="true" LOOP="true"> <P>Veja o video</p> <EMBED SRC="video.ogv" WIDTH="400" HEIGTH="450" AUTOSTART="true" LOOP="true"> Atributos da tag <EMBED> SRC : Serve para especificar o endereço do vídeo. WIDTH e HEIGHT : Servem para especificar respectivamente a Largura e Altura do quadro onde o vídeo vai aparecer. AUTOSTART : Serve para escolher se o vídeo vai começar a reproduzir quando a página for carregada (AUTOSTART= TRUE ) ou quando o usuário clicar no botão Executar (AUTOSTART= FALSE ). LOOP: Serve para especificar se o vídeo vai fica repetindo ou não. TRUE faz com que o vídeo reproduza infinitamente, FALSE faz com que o vídeo só seja reproduzido uma vez e depois se o usuário quiser rever o vídeo ele vai ter que pressionar o botão Executar. Letreiro Existe uma tag chamada <MARQUEE>, que permite que um trecho passe continuamente de um lado para o outro da tela. Esta tag é bastante interessante, pois podemos usá-la tanto com texto quanto como fotos. <MARQUEE>Texto a servir de letreiro</marquee> Principais atributos da tag <MARQUEE> a) BEHAVIOR <MARQUEE BEHAVIOR="comportamento do texto">texto</marquee> São José dos Campos,
10 Especifica o tipo de movimento que será usado para animar o texto do letreiro. As opções de movimento são: SCROLL: Permite ao texto passar continuamente pelo letreiro na direção especificada, entrando por um lado e saindo pelo outro. SLIDE: Permite ao texto passar por um dos cantos do letreiro, parando ao chegar no canto oposto e permanecendo na tela. ALTERNATE: Permite ao texto passar de um lado a outro das extremidades do letreiro, permanecendo na tela o tempo todo. Exemplo: <HEAD> <TITLE>Desenvolvimento web</title> <MARQUEE BEHAVIOR="SCROLL">Desenv. Web</MARQUEE> <MARQUEE BEHAVIOR="SLIDE">Desenv. Web</MARQUEE> <MARQUEE BEHAVIOR="ALTERNATE">Desenv. Web</MARQUEE> b) BGCOLOR <MARQUEE BGCOLOR="#XXXXXX"> texto</marquee> Simplesmente especifica a cor de fundo do letreiro. Obedece às mesmas configurações para cor, ou seja, você pode usar o nome da cor em inglês ou o seu código hexadecimal. c) DIRECTION <MARQUEE DIRECTION="direção > texto</marquee> Especifica a direção na qual o texto irá se mover. As opções são: LEFT: O texto se move do canto direito para o esquerdo. RIGHT: O texto se move do canto esquerdo par o direito. DOWN: O texto se move de cima para baixo. UP: O texto se move de baixo para cima. Exemplo: São José dos Campos,
11 <HEAD> <TITLE>Desenvolvimento web</title> <MARQUEE DIRECTION="LEFT">Desenv. Web</MARQUEE> <MARQUEE DIRECTION="RIGHT">Desenv. Web</MARQUEE> <MARQUEE DIRECTION="DOWN">Desenv. Web</MARQUEE> <MARQUEE DIRECTION="UP">Desenv. Web</MARQUEE> d) HEIGHT e WIDTH <MARQUEE HEIGHT="valor" WIDTH= valor >texto</marquee> Especificam, respectivamente, a altura e a largura do letreiro. O valor pode ser dado em pixels ou em relação à altura da janela em que a página será exibida. Exemplo: <HEAD> <TITLE>Desenvolvimento web</title> <MARQUEE WIDTH= 200 > Letreiro</MARQUEE> <MARQUEE DIRECTION= UP HEIGHT= 200 >Letreiro</MARQUEE> e) HSPACE e VSPACE <MARQUEE HSPACE="valor" VSPACE= valor > texto </MARQUEE> Definem, respectivamente, as margens à direita e à esquerda do letreiro e acima e abaixo do letreiro. Exemplo: São José dos Campos,
12 <HEAD> <TITLE>Desenvolvimento web</title> <MARQUEE HSPACE="50">Letreiro </MARQUEE> <MARQUEE DIRECTION="UP" VSPACE="50">Letreiro</MARQUEE> f) LOOP <MARQUEE LOOP="número de vezes">texto</marquee> Especifica quantas vezes o texto irá cruzar o letreiro. Se este atributo não for mencionado ou se o numero de vezes for igual à INFINITE, o texto irá se mover em repetição constante pelo letreiro. g) SCROLLMOUNT <MARQUEE SCROLLAMOUNT="valor">texto</MARQUEE> Controla a velocidade do texto, definem o número de pixels entre cada redesenho do texto. O valor a ser entrado em pixels representa a quantia de pixels que separa cada redesenho. Desta forma, quanto maior for o valor, mais rápido será o movimento do texto. Exemplo: <HEAD> <TITLE>Desenvolvimento web</title> <MARQUEE LOOP="5" SCROLLAMOUNT="50">Letreiro</MARQUEE> Atividade 3: Teste outros valores para os atributos da tag <MARQUEE>. São José dos Campos,
13 Atividade A Marquee com fotos Podemos utilizar a tag <MARQUEE> para fazer, por exemplo, um "SlideShow". O procedimento é o mesmo que com texto. Só que agora vamos fazer o MARQUEE parar quando passar o mouse por cima, e quando tirar de cima ele voltar a andar. Veja que é fácil, basta colocar os atributo onmouseover="this.stop()" onmouseout="this.start()" dentro do marcador <MARQUEE> Exemplo: <MARQUEE onmouseover="this.stop()" onmouseout="this.start()" WIDTH="200"> Antes nós colocávamos um texto dentro das delimitações do marcador, mas agora nós vamos colocar fotos usando marcadores <IMG>. Veja como fica: <HEAD> <TITLE>Desenvolvimento web</title> <MARQUEE onmouseover="this.stop()" onmouseout="this.start()" WIDTH="200" direction="down" > <IMG WIDTH="150" HEIGHT="120" SRC="foto1.jpg"><BR> <IMG WIDTH="150" HEIGHT="120" SRC="foto2.jpg"><BR> <IMG WIDTH="150" HEIGHT="120" SRC="foto3.jpg"><BR> <IMG WIDTH="150" HEIGHT="120" SRC="foto4.jpg"><BR> <IMG WIDTH="150" HEIGHT="120" SRC="foto5.jpg"> </MARQUEE> Neste pequeno slide feito aí em cima foram colocados 5 fotos, e elas estão uma em baixo da outra, por isso a necessidade do marcador <BR>, caso não seja colocado às fotos irão ficar uma do lado da outra. A largura do MARQUEE é de 200 pixels. Repare que foi colocado também o atributo DIRECTION="DOWN" para que as fotos deslizem de cima para baixo na vertical. Em vez de ser de um lado pro outro, na horizontal. Neste exemplo foi usado fotos, mas tudo que colocar dentro dos marcadores <MARQUEE> será "arrastado" por ele. Qualquer marcador, como Tabelas, Vídeos, Listas, etc. São José dos Campos,
14 Atividade B - Menu flutuante Desenvolvimento Web Agora que você aprendeu a utilizar o marquee, crie um menu flutuante, isto é, coloque imagens no marque, sendo que cada imagem é um link para uma página diferente. Modifique o atributo DIRECTION da tag MARQUEE para right, de forma que o menu deslize da esquerda para a direita. Atividade C Desenvolvimemento de site Crie um site sobre um tema de sua preferência utilizando o layout abaixo. Tente utilizar todos os conceitos aprendidos nas aulas. Crie quatro páginas html: 1. index.html (deverá conter informações iniciais do site) 2. tags.html (deverá conter um resumo sobre o html e as tags verificas nesta aula e links) 3. videos.html (deverá inserir videos relacionados ao assunto. Utilize o youtube) 4. apostilas.html (deverá conter links para download das apostilas de aula) Algumas sugestões: Crie um menu estático com links para as páginas Adicione uma imagem na mesma linha do nome do site e adicione um link a esta imagem para o site da escola Crie um letreiro no fim da página com o nome do autor do site Nome do site Home --- HTML --- Vídeos --- Apostilas Adicione aqui conteúdo Crie aqui um letreiro São José dos Campos,
Módulo: Criação de Páginas WEB
Módulo: Criação de Páginas WEB 50 Horas - Sessão 05/13 TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto/imagem a passar no ecrã. Deve ser utilizado quando queremos dar destaque
Leia maisPDI 1 - Projeto e Design de Interfaces Web
Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo
Leia mais4.14 - Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img
4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
Leia mais4.14 - Imagens: <IMG SRC="..."> SRC <IMG SRC="tecnologia.jpg"> único atributo que não pode ser omitido neste tag Nota: img
4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
Leia maisIntrodução ao HTML. Sumário
Introdução ao HTML Telemédia Grupo de Comunicações por Computador Sumário em HTML Texto Alternativo Alinhamento Margens Redimensionar 1 em HTML Para inserir uma imagem basta usar a etiqueta da seguinte
Leia maisCurso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de
Leia maisCRIAÇÃO DE SITES (AULA 4)
Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 4) O que eu preciso para construir um link? Para construir um link você usa o que
Leia maisPROGRAMAÇÃO WEB DO LADO DO CLIENTE
PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,
Leia maisINTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se
Leia maisQUEM FEZ O TRABALHO?
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome
Leia maisSumário. 1 Tutorial: Blogs no Clickideia
1 Tutorial: Blogs no Clickideia Sumário Introdução... 2 Objetivos... 2 Instruções para utilização do Tutorial... 2 Acesso ao Portal e a Home Blog... 3 Página Inicial da área do Blog... 4 Apresentação da
Leia maisDesenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável
Leia maisALUNES MANUAL DO USUÁRIO. Guia rápido Alunes
ALUNES MANUAL DO USUÁRIO Guia rápido Alunes 1 Manual de Instruções Versão 2.0 Alunes Informática 2 Sumário Introdução... 5 Pré-requisitos... 5 Principal/Home... 6 Como editar texto do home... 7 Desvendando
Leia maisWeb Design. Prof. Felippe
Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre
Leia maisDesenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção
Leia maisPassa a passo para construir uma página pessoal - Parte 1
Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):
Leia maisManual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web
Manual do Publicador Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Sumário Painel de Administração... 3 1 - Inserção de post... 5 2 Publicação de post com notícia na área headline (galeria de
Leia maisCONSTRUÇÃO DE BLOG COM O BLOGGER
CONSTRUÇÃO DE BLOG COM O BLOGGER Blog é uma abreviação de weblog, qualquer registro frequênte de informações pode ser considerado um blog (últimas notícias de um jornal online por exemplo). A maioria das
Leia maisXHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida).
XHTML 1. Significado do Termo HTML (HyperText Markup Language Linguagem de Marcação de Hipertexto) é a linguagem na qual são feitas as páginas que irão compor um site da Internet. A versão mais recente
Leia maisManual PAINT.NET de imagens
Manual PAINT.NET de imagens 1. Instalação 1.1 - Para instalar o programa paint.net, o primeiro passo é baixá-lo do endereço a seguir e salvá-lo em seu computador. http://ww2.prefeitura.sp.gov.br/paint_net/paint.net.3.36.exe
Leia maisJavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.
JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um
Leia maisProgramação para Internet I
Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:
Leia maisRoteiro 2: Conceitos de Tags HTML
Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias
Leia maisCurso PHP Básico. Jairo Charnoski do Nascimento
Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores
Leia maisPosicionamento e Layout com CSS
Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto
Leia maisEsse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.
Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Ele considera que você já tem o Joomla! instalado no seu computador. Caso você queira utilizá lo em um servidor na web,
Leia maisIntrodução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
Leia maisBem vindo ao ajuda do software QUICKFISH para criação de sites.
Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software
Leia maisTutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.
Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. PÁGINA: 2 de 21 Nenhuma parte deste documento pode ser utilizado ou reproduzido, em qualquer meio
Leia maisIntrodução ao HTML 5 e Implementação de Documentos
Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar
Leia maisManual de configuração do sistema
Manual de configuração do sistema (v.1.5.x Beta) Rua México, 119 Sala 2004 Centro Rio de Janeiro, RJ www.doctors-solution.com.br www.simdoctor.com.br contato@simdoctor.com.br Sumário 1. Fazendo seu primeiro
Leia maisMenus Personalizados
Menus Personalizados Conceitos básicos do Painel Logando no Painel de Controle Para acessar o painel de controle do Wordpress do seu servidor siga o exemplo abaixo: http://www.seusite.com.br/wp-admin Entrando
Leia maisBanner Flutuante. Dreamweaver
Banner Flutuante Dreamweaver Começamos com um arquivo em branco no Dreamweaver MX. Para que o banner apareça sobre a página, precisamos inserir uma camada a mais no arquivo HTML. Selecione o menu Inserir
Leia maisOFICINA BLOG DAS ESCOLAS
OFICINA BLOG DAS ESCOLAS Créditos: Márcio Corrente Gonçalves Mônica Norris Ribeiro Março 2010 1 ACESSANDO O BLOG Blog das Escolas MANUAL DO ADMINISTRADOR Para acessar o blog da sua escola, acesse o endereço
Leia maisAula 5 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 Aula 5 Microsoft PowerPoint 2003: Criando uma Apresentação 1 Introdução ao Microsoft PowerPoint
Leia maisMANUAL DO ANIMAIL 1.0.0.1142 Terti Software
O Animail é um software para criar campanhas de envio de email (email Marketing). Você pode criar diversas campanhas para públicos diferenciados. Tela Principal do sistema Para melhor apresentar o sistema,
Leia mais1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO
Leia maisOficina de Construção de Páginas Web
COMPETÊNCIAS BÁSICAS EM TIC NAS EB1 Oficina de Construção de Páginas Web Criação e Publicação Guião Páginas WWW com o editor do Microsoft Office Word 2003 1. Introdução. 2. Abrir uma página Web. 3. Guardar
Leia maisManual do Plone (novo portal do IFCE)
Manual do Plone (novo portal do IFCE) Dezembro/2015 Índice Como criar submenus... 3 Como criar banner rotativo... 4 Como remover um banner... 5 Como criar uma notícia... 6 Como inserir imagem na notícia...
Leia maisWordPress Institucional UFPel Guia Rápido
GABINETE DO REITOR COORDENAÇÃO DE TECNOLOGIA DA INFORMAÇÃO NÚCLEO DE SISTEMAS DE INFORMAÇÃO SEÇÃO DE TECNOLOGIAS PARA WEBSITES WordPress Institucional UFPel Guia Rápido Versão 2.0.1 Março de 2015 Introdução
Leia maisIntrodução ao HTML Hypertext Markup Language
Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do
Leia maisUtilizamos um tema no Mais Fórmula 1 que possui algumas peculiaridades. Irei explicar passo-a-passo cada uma delas.
Mais Fórmula 1 Instruções de postagem no Mais Fórmula 1. O Mais Fórmula 1 está hospedado na UOL HOST e é gerenciado pelo Wordpress. O Wordpress é um dos melhores sistemas de gerenciamento de conteúdo do
Leia maisPortal do Projeto Tempo de Ser
Sumário Portal do Projeto Tempo de Ser O que é um Wiki?...2 Documentos...2 Localizando documentos...3 Links...3 Criando um Documento...4 Criando um link...4 Editando um Documento...5 Sintaxe Básica...5
Leia maisAPOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)
APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1 - Área de trabalho e personalizando o sistema... 3 A área de trabalho... 3 Partes da área de trabalho.... 4 O Menu Iniciar:...
Leia maisWEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou
Leia maisManual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania
Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania Sumário Objetivos do Blog... 2 Log-in... 3 Esqueci minha senha... 4 Utilizando o Blog... 5 Encontrando seu Blog... 5 Conhecendo o
Leia maisWebdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML
Leia maisHTML. Conceitos básicos de formatação de páginas WEB
HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto
Leia maisINTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Hiperligações A propriedade mais importante dos documentos html é a possibilidade de fazer hiperligações Para isso usa-se a tag
Leia maisÍNDICE MANUAL SITE ADMINISTRÁVEL TV. 1. Introdução 2. Acessando o site administrável/webtv SITE ADMINISTRÁVEL 3. CONFIGURAÇÕES
MANUAL SITE ADMINISTRÁVEL TV ÍNDICE 1. Introdução 2. Acessando o site administrável/webtv SITE ADMINISTRÁVEL 3. CONFIGURAÇÕES 3.1 - Dados Cadastrais 3.2 - Noticias 3.3 Redes Sociais 3.4 - Player 4. DESIGN
Leia maisInformática Básica para o PIBID
Universidade Federal Rural do Semi Árido Programa Institucional de Iniciação à Docência Informática Básica para o PIBID Prof. Dr. Sílvio Fernandes Roteiro O Tamanho e Resolução de imagens O Compactação
Leia maisAula Au 3 la 9 Windows-Internet
Aula 39 Aula 1 Resolução de Vídeo São as dimensões de uma imagem ou tela na horizontal e vertical, medida em pixels. O termo pixel tem origem do inglês, sendo composto pelas palavras picture (imagem) e
Leia maisClaudio Damasceno. Avançar
Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA
Leia maisLinks e Frames José Antônio da Cunha
Links e Frames José Antônio da Cunha Links Até agora, produzimos documentos simples. Mas os documentos de hipertexto têm como principal característica, fazer ligações com outros hipertextos. Os pontos
Leia maisSIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar links em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer
Leia maisPASSO A PASSO MOVIE MAKER
PASSO A PASSO MOVIE MAKER Nesta etapa, você deverá apresentar o programa e ajudá-los a montarem o filme. Veja como é fácil. Siga as instruções do passo-a-passo: DICA O que é o Movie Maker? Com o Microsoft
Leia maisAnexo III Funcionamento detalhado do Sistema Montador de Autoria
1 Sumário Anexo III Funcionamento detalhado do Sistema Montador de Autoria Anexo III Funcionamento detalhado do Sistema Montador de Autoria... 1 1 Sumário... 1 2 Lista de Figuras... 5 3 A Janela principal...
Leia maisFERRAMENTAS DE COLABORAÇÃO CORPORATIVA
FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Compartilhamento de Arquivos no Google Drive Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Utilização do Google Grupos Introdução...
Leia mais1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão
1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena
Leia maisComo criar uma página WEB
Como criar uma página WEB Utilização de comandos HTML Luís Manuel Borges Gouveia versão 1.1 Dezembro, 1996 Requisitos necessários para criar ou editar uma página Web um navegador (browser): Netscape ou
Leia maisBarra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas
Microsoft Power Point 2003 No Microsoft PowerPoint 2003, você cria sua apresentação usando apenas um arquivo, ele contém tudo o que você precisa uma estrutura para sua apresentação, os slides, o material
Leia maisCOMO UTILIZAR O EDITOR DE TEXTO
COMO UTILIZAR O EDITOR DE TEXTO texto. Esse tutorial é um tutorial básico para auxiliar na utilização do editor de A barra de ferramentas do editor é a seguinte: Abaixo será discutido cada item, onde a
Leia mais96 cartuchos simultâneos ou não. Copiar e Colar Cartucho: O usuário poderá copiar e colar os cartuchos, e até mesmo colar o cartucho selecionado em um outro perfil. Além de ter o recurso para mudar a cor
Leia maisApostila de criação de website
Apostila de criação de website "Webnode" OBS: Informações e imagens retiradas do webnode O que é o WebNode : O WebNode é um sistema de criação de sites de fácil utilização. # Grátis. Sem burocracias, #
Leia maisASSOCIAÇÃO CRISTÃ DE MOÇOS DO RIO GRANDE DO SUL DEPARTAMENTO DE TECNOLOGIA DA INFORMAÇÃO
MANUAL MEDIAWIKI Manual Media Wiki Página 2 Sumário O que é MediaWiki... 4 Acesso ao sistema... 5 Criação do índice principal... 7 Criação de página... 14 Bloqueio/Proteção de página... 17 Manual Media
Leia maisGuia de Início Rápido
Guia de Início Rápido O Microsoft Word 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Barra de Ferramentas de Acesso Rápido
Leia maisPortal dos Fóruns de EJA Brasil
Manual Portal dos Fóruns de EJA Brasil.::2007::. SUMÁRIO COMO PÚBLICAR CONTEÚDO DIRETO NO PORTAL... 02 COMO ANEXAR UM ARQUIVO... 04 COMO CRIAR UM HIPERLINK... 06 COMO CRIAR UM MENU... 08 COMO ADICIONAR
Leia maisINTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz
INTRODUCAO DESENVOLVIMENTO E DESIGN DE INTRODUÇÃO INTRODUÇÃO A linguagem HTML (Hipertext Markup Language Linguagem de Marcação de Hipertexto) é usada para divulgar páginas na World Wide Web, o serviço
Leia maisMANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte
MANUAL JOOMLA 2.5 PORTAL INTERNET Ministério do Esporte SUMÁRIO 1.0 - Módulo Administração... 1 2.0 Banner randômico... 2 2.1 Adicionar novo slide... 2 2.2 Excluir slide... 6 3.0 Artigos... 7 3.1 Adicionar
Leia maismkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Leia maisVamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.
3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao
Leia maisEla funciona de um jeito parecido com as mídia de RSS próprio: o sistema acessa o feed do twitter e exibe, na tela, os últimos tweets.
Mídia do Twitter Esta mídia serve para mostrar os últimos tweets de uma conta específica. É útil para estabelecimentos que usam com frequência o twitter e que desejam que seus clientes acompanhem isso
Leia mais02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
Leia maisTutorial SGCD. 1. Efetuando Login no Sistema. 2. Criando uma nova página. 3. Editando uma página já existente
Tutorial SGCD 1. Efetuando Login no Sistema 2. Criando uma nova página 3. Editando uma página já existente 4. Anexando arquivos em páginas e no menu esquerdo 5. Colocando Imagens em páginas 6. Colocando
Leia maisComo incluir artigos:
Como incluir artigos: O WordPress é uma ferramenta muito flexível, com muitas variações e ajustes que podem torná-lo algo muito simples e também muito sofisticado conforme os recursos que são configurados
Leia maisApostila de Windows Movie Maker
Apostila de Windows Movie Maker Autor: João Paulo da Silva Apostila de Windows Movie Maker Autor: João Paulo da Silva 2 Índice Introdução ao Windows Movie Maker...03 O que é o Windows Movie Maker?...03
Leia maisVerifique se o Plugin do Flash Player está instalado no seu computador para a navegação adequada no portal.
1 Tutorial: Blogs no Clickideia Introdução Esse tutorial mostrará as funções básicas da ferramenta de Blog do Portal Educacional Clickideia. Ele foi elaborado pensando em diferentes níveis de usuários
Leia mais72ABC - 2 Bimestre. Check-list para Prova Bimestral. 01 - Criar uma versão do site do primeiro bimestre em HTML.
72ABC - 2 Bimestre Check-list para Prova Bimestral 01 - Criar uma versão do site do primeiro bimestre em HTML. 02 Serão desenvolvidas as mesmas páginas já feitas, mas em versão HTML. A seguir, um exemplo
Leia maisÍndice. Manual de uso do Wordpress Produção de conteúdo. 1) Acesso ao Painel de Controle. 2) Ambientação na Ferramenta. 3) Inserir novo Post
Índice 1) Acesso ao Painel de Controle 2) Ambientação na Ferramenta 2.1) Posts 2.1.1) Adicionar novo post 2.1.2) Editar posts 2.2) Mídia 2.2.1) Tipos de Mídia 2.2.2) Biblioteca 2.2.3) Adicionar novo 3)
Leia maisManual do Painel Administrativo
Manual do Painel Administrativo versão 1.0 Autores César A Miggiolaro Marcos J Lazarin Índice Índice... 2 Figuras... 3 Inicio... 5 Funcionalidades... 7 Analytics... 9 Cidades... 9 Conteúdo... 10 Referência...
Leia mais[SITE FÁCIL CDL MANUAL DO USUÁRIO]
Câmara de Dirigentes Lojistas [SITE FÁCIL CDL MANUAL DO USUÁRIO] Sumário 1. Controle de versão... 3 2. Objetivo... 4 3. Site fácil... 4 4. Acessando o sistema de gestão de conteúdo (SGC)... 5 5. Páginas
Leia mais> Herbet Ferreira Rodrigues > contato@herbetferreira.com
Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação
Leia maisEditando textos no Siga-Doc
Editando textos no Siga-Doc Introdução...2 Executando o editor de textos...3 Acessando pela primeira vez...3 Se o editor de textos não for exibido...4 Trabalhando com tabelas...6 Inserindo uma tabela...6
Leia maisHTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,...
Sessão 1 A INTERNET Baseada no modelo Cliente-Servidor Cliente: programa que pede informação Servidor: programa que envia a informação No caso da WWW: Cliente: browser (IE, por exemplo) Servidor: IIS (Internet
Leia maisManual das funcionalidades Webmail AASP
Manual das funcionalidades Webmail AASP 1. Configurações iniciais 2. Regras 3. Histórico da conta 4. Autorresposta 5. Dados de acesso (alterando senha de acesso) 6. Identidade (assinatura) 7. Redirecionamento
Leia maisComo criar um formulário de pesquisa usando o Google Drive
25/09/2013 07h25 - Atualizado em 25/09/2013 07h43 Como criar um formulário de pesquisa usando o Google Drive por EDIVALDO BRITO Para o TechTudo 1 comentário Se você precisa fazer alguma pesquisa de um
Leia maisContinuação. 32. Inserir uma imagem da GALERIA CLIP-ART
Continuação 32. Inserir uma imagem da GALERIA CLIP-ART a) Vá para o primeiro slide da apresentação salva no item 31. b) Na guia PÁGINA INICIAL, clique no botão LAYOUT e selecione (clique) na opção TÍTULO
Leia mais15. OLHA QUEM ESTÁ NA WEB!
7 a e 8 a SÉRIES / ENSINO MÉDIO 15. OLHA QUEM ESTÁ NA WEB! Sua home page para publicar na Internet SOFTWARES NECESSÁRIOS: MICROSOFT WORD 2000 MICROSOFT PUBLISHER 2000 SOFTWARE OPCIONAL: INTERNET EXPLORER
Leia maisManual de Utilizador. Disciplina de Projecto de Sistemas Industriais. Escola Superior de Tecnologia. Instituto Politécnico de Castelo Branco
Escola Superior de Tecnologia Instituto Politécnico de Castelo Branco Departamento de Informática Curso de Engenharia Informática Disciplina de Projecto de Sistemas Industriais Ano Lectivo de 2005/2006
Leia maisManual de Gerenciamento de Conteúdo
Manual de Gerenciamento de Conteúdo 1 Sumário 1) O que é um Gerenciador de Conteúdo...3 2) Como o Site está Estruturado...3 3) Como Gerenciar o Conteúdo do Site...5 3.1) Adicionar Itens no Menu de Navegação...6
Leia maisTutorial de HTML. O que é HTML? Aprendendo
Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma
Leia maisInternet: Site da Simonsen e Secretaria Online
Capítulo 9 Internet: Site da Simonsen e Secretaria Online 9.1 Introdução a Internet A palavra Internet é o resultado da junção dos termos inter (internacional) e net (rede), e é o nome da grande rede mundial
Leia maisAula 2: Listas e Links
Aula 2: Listas e Links Nesta segunda aula, você aprenderá a utilizar listas numeradas ou não, a entender o que são listas de definições e como fazer referências a outros documentos. Vamos entender a diferença
Leia maisCRIANDO TEMPLATES E LEGENDAS
CRIANDO TEMPLATES E LEGENDAS Este tutorial tem como objetivo instruir passo à passo como criar templates de peças, utilizar os novos recursos de cadastro de propriedade de peças e criação de legenda. 1-
Leia maisUtilizando o correio eletrônico da UFJF com Thunderbird e IMAP
Utilizando o correio eletrônico da UFJF com Thunderbird e IMAP O cliente de e-mail web utilizado pela UFJF é um projeto OpenSource que não é desenvolvido pela universidade. Por isso, pode ocorrer que alguns
Leia maisSUMÁRIO 1. ACESSO À PÁGINA DO AMBIENTE VIRTUAL 2. CONTATANDO O SUPORTE 3. ATUALIZAR PERFIL 4. COMO ACESSAR AS DISCIPLINAS
SUMÁRIO 1. ACESSO À PÁGINA DO AMBIENTE VIRTUAL 2. CONTATANDO O SUPORTE 3. ATUALIZAR PERFIL 4. COMO ACESSAR AS DISCIPLINAS 5. PARTICIPANTES DA DISCIPLINA 6. ENVIAR MENSAGENS 7. PARTICIPAÇÃO NO FÓRUM 8.
Leia maisTUTORIAL COMO CRIAR E EDITAR UM VÍDEO NO WINDOWS MOVIE MAKER*
TUTORIAL COMO CRIAR E EDITAR UM VÍDEO NO WINDOWS MOVIE MAKER* * Microsoft Windows MovieMakeré um programa da Microsoft Corporation. A versão utilizada é a 5.1 que já vem instalada no Microsoft Windows
Leia mais