Antes de começarmos a estudar HTML, é necessário que se entenda alguns princípios básicos que envolvem esta linguagem.

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

Download "Antes de começarmos a estudar HTML, é necessário que se entenda alguns princípios básicos que envolvem esta linguagem."

Transcrição

1 MANUAL DE HTML

2 1.Introdução Antes de começarmos a estudar HTML, é necessário que se entenda alguns princípios básicos que envolvem esta linguagem Internet Mais que um modismo a Internet tornou se um fenômeno. Conectando mais de um milhão de computadores e cerca de 40 milhões de usuários, espalhados em diversos países, valores estes que mudam a cada dia, sem dúvida não dar para ficar de fora desta teia. Enfim, se formos descrever Internet, a melhor é definirmos como comunicação. Com ela encontramos serviços e facilidades, notícias e atualidades, ou se preferir como é o caso de muitas pessoas, um excelente local para encontrar amigos, jogos, bate papo e muito mais, como lojas virtuais, onde você pode comprar ou vender com toda segurança Histórico da Internet A Internet teve início em 1969 sob o nome de ARPANET (USA). Composta de quatro computadores tinha como finalidade, demonstrar as potencialidades na construção de redes usando computadores dispersos (espalhados) em uma grande área. A idéia foi boa, e em 1972, 50 universidades e instituições militares já possuíam conexões. Hoje é uma arquitetura de software e hardware que se comunicam entre si que são mantidas por organizações comerciais e governamentais. Mas uma das principais características da Internet, é que não possui dono. Para organizar todas estas trocas de informações, existem associações e grupos que se dedicam para suportar, ratificar padrões e resolver questões operacionais, visando promover os objetivos da Internet A WORD WIDE WEB(WWW) As pessoas costumam falar em Internet e Web, será a mesma coisa? Será apenas uma gíria da moçada do bate papo? Ou existe realmente um conceito científico para isto? Para resolver esta dúvida e também para começarmos a entender esta série de definição de conceitos, vamos partir do seguinte princípio: A Word Wide Web (Ampla Rede Mundial) é conhecida como WWW, uma nova estrutura de navegação pelos diversos itens de dados em vários computadores diferentes. O modelo WWW é tratar todos os dados da Internet como hipertexto, isto é, vinculações entre as diferentes partes do documento para permitir que as informações sejam exploradas interativamente e não apenas de uma forma linear. Por isso existem programas como o Mozilla Firefox e o Microsoft Internet Explorer que

3 aumentaram muito a popularidade da Internet e graças as suas potencialidades. Hoje podemos ver nas páginas da Internet, documentos formatados (cores, efeitos e etc...), escutar música, assistir a vídeos, e muito mais. Enfim a Web é a interface gráfica da Internet, pois podemos acessar a Internet, transferir arquivos( Processo a qual chamamos UpLoad), e realizar outras operações básica sem precisar de uma interface gráfica. Para concluir só estamos de fato usando a Web, quando estamos navegando fazendo uso das Home Pages para acessar um site, ou seja, um endereço único que contêm a Home Page (página inicial) e outras páginas que fazem parte deste conjunto de páginas e todas em um único código fonte escrito em uma linguagem chamada HTML Web Web é o diminutivo para World Wide Web. Termo usado originalmente para a parte da Internet que surgiu no início da década de 90, composta por informações dispostas na forma de textos, imagens e sons, pela qual se navega com a ajuda de Browsers. Antes, trocava se basicamente mensagens. As duas redes acabaram se fundindo e hoje a palavra Web é usada como sinônimo da própria Internet ("Grande Rede") Hipertexto Originalmente, Hipertexto é qualquer informação de texto em um computador, que contenha saltos para outras informações. Os documentos visualizados através dos Browsers são escritos em Hipertextos, utilizando se uma linguagem especial chamada HTML (HyperText Markup Language). Através de hipertexto pode se "navegar" de forma especial através de elementos especiais chamados "links" para outros documentos ou para partes do mesmo documento. Um documento "não hipertexto" permite somente que se navegue em uma sequência, percorrendo seu conteúdo para frente e para trás. O hipertexto nas páginas da Web foi expandido para incluir hyperlinks a partir de texto, de uma figura, de um elemento gráfico, de mapas de imagens, som e até mesmo animações. Para se ter uma idéia de hipertexto, basta visualizar o sistema de "Ajuda" do Microsoft Windows Links ou Hyperlinks Link é um ponto de acesso ou salto até um local na mesma pasta de trabalho ou em outro arquivo, representado a partir de texto colorido ou sublinhado, de uma figura, de

4 um elemento gráfico ou de um mapa de imagens. Você pode clicar em um link para saltar até um local em um arquivo em seu sistema local, em um compartilhamento de rede na World Wide Web ou em uma Intranet Home Page Home Page é um conjunto de "páginas", documentos diponíveis na Web, interligados entre si (através de links). O termo Home Page também é usado para designar a "página principal" de um conjunto de documentos. Um conjunto de "páginas" também é chamado de Site. Alguns Servidores da Web reservam index.htm como o nome da home page (página principal), enquanto outros a denominam como default.htm Site Palavra em inglês que significa local, lugar. Na Internet, designa um conjunto de páginas que representa uma pessoa, instituição ou empresa na rede Browsers (Navegadores da Web) Browsers são softwares que lêem e interpretam arquivos HTML (Hyper Text Markup Language) enviados na World Wide Web, formata os em páginas da Web e os exibe ao usuário. Navegadores da Web também podem executar som ou arquivos de vídeo incorporados em documentos da Web se você dispuser do hardware necessário. Existem Browsers para todos os gostos. Os mais utilizados, o Internet Explorer e o Mozilla Firefox, vêm acompanhados de outros programas para Internet, como o leitor de Correio Eletrônico (e mail). Existem outras opções de Browsers, basta escolher um deles e partir tranquilo pelos "mares" da Internet Protocolo Protocolo é um conjunto de regras estabelecidas com o objetivo de permitir a comunicação entre computadores. É um método de acesso a um documento ou serviço através da Internet, como File Transfer Protocol (FTP) ou Hypertext Transfer Protocol (HTTP). Também denominado tipo Protocolo HTTP (HyperText Transfer Protocol) HTTP (Protocolo de Transferência de Hipertexto) é um protocolo da Internet utilizado pelos computadores ligados à Web para comunicar se entre si, ativa os navegadores da Web para recuperarem informações de servidores da World Wide Web. O protocolo permite a um usuário usar um programa cliente para entrar em um URL (ou clicar em um hyperlink) e recuperar texto, elementos gráficos, som e outras informações digitais de um servidor da Web.

5 Endereços URL de recursos HTTP começam com Protocolo FTP (File Transfer Protocol) FTP(Protocolo de Trasferência de Arquivo) é um protocolo que possibilita a transferência de arquivos de um local para outro pela Internet. Normalmente, os sites têm áreas públicas de FTP, permitindo que os usuários façam download de programas por esse processo. Protegido por senhas, o FTP também é utilizado para atualizar a distância sites localizados em empresas hospedeiras. URLs de arquivos em servidores FTP começam com ftp:// URL (Uniform Resource Locator Localizador de Recursos Uniforme) Um dos principais objetivos do projeto da WWW era o desenvolvimento de um padrão de referência a um item independente de seu tipo (som, filme, imagem, etc.). Para este objetivo foi desenvolvido a URL (Uniform Resource Locator). URL (Uniforme Resource Locator, numa tradução literal, Localizador Uniforme de Recursos) é uma seqüência de caracteres que fornece o endereço Internet de um Site da Web ou um recurso da World Wide Web, juntamente com o protocolo (como FTP ou HTTP) através do qual o site ou o recurso é acessado. A parte inicial do URL (a que termina com os dois pontos) indica qual protocolo Internet está sendo usado. As duas barras indicam que o que vem a seguir é o endereço de um servidor válido da Internet ou localização simbólica. Pode ser colocado um texto (www.xyz.com.br, por exemplo) ou o endereço IP do site URL Absoluto O URL absoluto inclui um protocolo, como "http", local da rede, além de caminho e nome de arquivo opcionais. Exemplo: é um URL Absoluto URL Relativo Uma referência relativa assume-se que a máquina e diretório do item já estão sendo usados e apenas necessita-se indicar o nome do arquivo desejado (ou posivelmente subdiretório e arquivo).um URL relativo inclui um protocolo. Exemplo: O URL relativo Treinamento/Cursos.htm refere-se à página Cursos.htm, na pasta Treinamento,

6 abaixo da pasta atual Endereço Endereço é o caminho até um objeto, documento, arquivo, página ou outro destino. Um endereço pode ser um URL (Uniforme Resource Locator - Localizador Uniforme de Recursos) ou um caminho de rede UNC (Universal Naming Convention - Convenção Universal para Nomes), o formato padrão para caminhos que incluem um servidor de arquivo de rede de área local que utiliza a sintaxe a seguir: Exemplo: \\servidor\compartilhamento\caminho\nome do arquivo O endereço indica um URL do Web Site da XYZ Informática Ltda Entendendo uma URL Protocolo - Protocolo da Internet utilizado pelos computadores ligados à Web para comunicar-se entre si. Nome do Domínio - Domínio são as categorias de endereços da Internet que representam países ou tipos de organização. www Sigla de World Wide Web, significa Rede Mundial XYZ Nome específico que pode conter uma ou mais palavras, separadas ou não, por hifens (ex.: XYZ-informatica), que simboliza por exemplo o nome da empresa, ou de um produto especifico. com Tipo de Domínio - Indica a natureza do Site. No caso como trata-se de um Site de uma empresa privada, ".com" vem de comercial. Outros Exemplo:.gov (governo) e.org (organizações sem fins lucrativos). br Sigla do País - composta de duas letras, significa que a página está situada em um computador no Brasil. Páginas que não possuem terminação indicando o país de origem estão situadas nos Estados Unidos. Outros Exemplo:.pt (Portugal) e.jp (Japão). treinamento Diretório (pasta) onde está localizado a página (arquivo) cursos.htm. Às vezes uma URL indica apenas o diretório (ou o servidor). Nesse caso, o servidor se encarrega de procurar e enviar o arquivo adequado. cursos.htm Nome da página escrita em HTML requerida (páginas da Web geralmente tem terminação em.htm ou.html). #local Aponta para o local específico dentro da página que será exibida Endereço IP (Endereço do Protocolo Internet) A maneira padrão de identificar um computador conectado à Internet, da mesma forma que um número de telefone identifica um telefone em uma rede telefônica. Um endereço IP é representado por quatro números separados por pontos e onde cada número é menor que 256, por exemplo, O administrador de seu servidor

7 Web ou o provedor de serviços de Internet irá atribuir um endereço IP a seu computador. O tipo mais comum de URL é que fornece o endereço Internet de uma página da Web. Alguns outros tipos de URL são: ftp:// que fornece o local da rede de um recurso FTP(este serviço representa o protocolo de transferência de arquivo na Internet.). gopher:// que fornece o endereço Internet de um diretório gopher (representa um serviço nãográfico de informações, dirigido por menus). news:// grupos de discussão ou de notícias (representa o serviço de BBS (bulletin board) organizado em áreas de interesse especial. ) mailto:// para especificar um endereço de Correio Eletrônico da Internet (para enviar correio eletrônico). mailto:// representa um arquivo localizado em seu próprio computador ISP (Internet Service Provider) Provedores O Provedor é uma Empresa ou Organização que oferece conexão para Internet. Através de um Provedor você pode ter acesso à Internet e serviços de hospedagem de Site. O Provedor disponibiliza as informações solicitadas pelos "navegadores" (Browsers) por uma combinação de computador e programas que formam os servidores situados em instalações apropriadas, neste caso, o Provedor aluga espaço em um disco rígido cuja máquina deve estar permanentemente conectada à rede, disponibilizando sua Home Page 24 horas por dia a todos os usuários da Internet. A ligação com o provedor pode ser feita por linhas telefônicas normais (conexão discada) ou por linhas especiais, ligadas 24 horas por dia (conexão dedicada) e hoje em dia através de banda larga. Um provedor geralmente oferece várias funções de aplicações como World Wide Web (http), transferência de arquivos (ftp) e gerenciamento de conteúdo (armazenamento de dados). A maioria dos provedores também disponibilizam caixa postal eletrônica, "contas" de para seus usuários, juntamente com os serviços de acesso e hospedagem Seu Site na Grande Rede Ao desenvolver sua Home Page, basta transferir seus arquivos via FTP para o Provedor. Alguns programas específicos podem facilitar o seu Upload, já que o Browser funciona apenas para busca de arquivos, e não para o envio. O CuteFTP é um dos mais indicados pelos provedores, que permite um acesso totalmente gráfico e interativo a servidores FTP. Mas, sem dúvida, existe um excelente, o Internet Neighborhood. Sua interface é comum ao do Microsoft Windows Explorer, funcionando de maneira simples, possibilitando Download e Upload da máquina local para o servidor FTP, transferindo arquivos de uma pasta para outra Login Acesso. É o processo de identificar-se ao entrar num computador ou em uma rede de computadores. A cada entrada na Internet, você se "loga" (faz o login) em seu Provedor, colocando nome (username) e senha (password).

8 2.Introdução à Linguagem HTML Originado do casamento dos padrões HyTime (Hypermedia/Time based Doumnt Structuring Language) e SGML (Standard Generalized Markup Language), o HTML, sigla para HyperText Markup Language (Linguagem de Formatação de Hipertexto), linguagem usada para criar páginas na Web, estabelece como um determinado elemento deve ser visualizado, não sendo, portanto uma linguagem de programação, e sim, uma linguagem de formatação de exibição de textos, através de "comandos" conhecidos como TAGs. Em suma, HTML é empregado para definir as funções dos diferentes elementos das páginas (como textos, fotos ou animações) que serão visualizadas pelo programa de navegação (Browser) HyTime (Hyprmedia/Time based Document Structuring Language) HyTime (ISO 10744:1992) é o padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks. O padrão HyTime é independente dos padrões e processamento de texto em geral. Ele fornece a base para a construção de sistemas hipertexto padronizados, consistindo de documentos que aplicam os padrões de maneira particular. SGML (Standard Generalized Marup Language) Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna se conveniente para transformar documentos em hiper objetos e para descrever as ligações. SGML não é aplicado de maneira padronizada: todos os produtos SGML tem seu próprio sistema para traduzir as etiquetas para um particular formatador de texto.ssa sim é uma postura que deve ser tomada O documento HTML pode ser escrito em qualquer editor de textos, desde que este tenha a capacidade de gravá lo como código ASCII (American Standard Code for Information Interchange código utilizado para representar textos quando há computadores envolvidos), isto é, como texto puro, sem formatação ou caracteres de controle. Pode se usar, portanto, o gedit, kate, kedit nas distribuições linux, ou o Notepad do Windows,. Pode se também usar editores mais modernos, como o BrOffice Writer ou o Word, sendo necessário neste caso que o documento seja gravado no formato texto e não como um ''.odt" normal do BrOffice Writer ou.doc" normal do MS Word. Conjunto de caracteres ASCII

9 O conjunto de caracteres de 7 bits do código padrão americano para intercâmbio de informações (ASCII, American Standard Code for Information Interchange) e que é amplamente usado para representar letras e símbolos encontrados em um teclado americano padrão. O conjunto de caracteres ASCII é igual aos 128 primeiros caracteres (0127) do conjunto de caracteres ANSI. Conjunto de caracteres ANSI O conjunto de caracteres de 8 bits do Instituto Nacional de Padronização Americano (ANSI, American National Standards Institute) que é usado pelo Microsoft Windows e que possibilita a representação de até 256 caracteres (0 255) através do teclado. Os 128 primeiros caracteres (0 127) correspondem a letras e símbolos de um teclado americano padrão. Os outros 128 caracteres ( ) representam caracteres especiais, como letras de alfabetos internacionais, acentos, símbolos monetários e frações. Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador (Browser), você verá páginas na WEB bem dinâmicas, organizadas, animadas e com ela trazendo informações, imagens, sons, vídeos e etc. Então, você deve se perguntar. Como é feito? Como elas se propagam? Todas estas páginas possuem um código fonte escrito numa linguagem chamada HTML (Hyper Text Markup Language). Este manual tem por objetivo mostrá lo como criar e exibir páginas HTML, como as que você ver através da WEB. Tais páginas são criadas a partir de arquivos texto ASCII, contendo caracteres de marcação da linguagem HTML. Uma vez criados, estes arquivos são salvos com uma extensão.html. Portanto, deveremos salvar nosso exercícios com esta extensão. Já que entendemos melhor como funciona a internet em geral, daremos inicio ao curso de HTML. Todo documento HTML apresenta elementos entre parênteses angulares (< e >). Esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento, representada com uma barra ( / ): Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e onde termina o texto com a formatação especificada por ela. Alguns elementos são chamados vazios, pois não marcam uma região de texto, apenas inserem alguma coisa no documento, não havendo a necessidade do fechamento:

10 Todos os elementos podem ter atributos: HTML é um recurso muito simples e acessível para a produção de documentos. Nesta apostila, será possível aprender grande parte de seus elementos. Nota: Não existem programas em HTML, pois HTML não é uma linguagem de programação, mas de formatação (marcação). Portanto, a rigor não existem "programadores" de HTML. 3.Edição de Documentos HTML Existem Editores HTML chamados WYSIWYG (what you see is what you get o que você vê é o que você tem). Eles oferecem ambiente de edição com um resultado final das marcações (pois o resultado final depende do browser1 usado para visitar a página). Alguns bastante conhecidos são por exemplo: FrontPage e Dreamweaver. Além dos editores específicos para HTML, Editores de Textos bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML (menu Arquivo, Salvar como, Salvar_como Tipo). Um documento HTML, como dito anteriormente, normalmente terá extensão.html porem, poderão também estar no formato.htm. Gostaria de lembrar como citei a linha acima, que existem vários editores de Home Pages, como por exemplo: o Front Page Express, Netscape Composer, Home Site, etc. Só que na ausência destes aplicativos e você desconhecendo a Linguagem de HyperTextos, HTML, não poderia criar suas páginas. Daí a importância de se conhecer esta linguagem. Para estudarmos HTML, usaremos editores de texto simples como gedit, kate ou Bloco de Notas. Precisaremos também de um Browser (Mozilla Firefox ou Internet Explorer) para que possamos visualizar como nossa página está ficando. Para nossos exemplos usarei o Mozilla Firefox. Tudo Bem? Mas antes vamos entender como estas páginas são colocadas para que todos possam ver na Web. 4.Publicação de Documentos na Internet (Sites) Para que uma página esteja permanentemente disponível pela Web, ela precisa ter um endereço fixo, alojada em um servidor. Existem vários provedores de espaço (hosting) gratuitos e também os provedores de acesso geralmente oferecem espaço para os sites de seus assinantes. Sites com fins

11 lucrativos geralmente são hospedados em provedores de espaço pagos. Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP2 ou por uma página de envio no próprio provedor de espaço) e suas páginas já estarão disponíveis para visitas no mundo todo. Já tendo uma idéia dos principais conceitos, vamos começar a produzir nossas páginas. 5.Documento HTML Básico e seus Componentes A estrutura básica de uma página HTML é mostrada na Figura 1. Observe que a construção de páginas exige o uso das TAGS. Figura 1 - Componentes Básicos de um Documento HTML Com certeza você observou melhor o que foi dito anteriormente, que as TAGs normalmente estarão antes e depois de algo, onde este algo pode ser algum texto, ou outro conjunto de TAGs que estão entre estas duas TAGS As etiquetas (tags) HTML não são case sensitive, ou seja, as TAGS não fazem diferença entre letras maiúsculas ou minúsculas. Tanto faz escrever, por exemplo, <HTML>, <Html>, <html>, <HtMl>, etc. Onde : <html> <head> <title> <body> Tabela 1 - Tabela de TAGs Principais Marca o início e fim do documento Marca o início e o fim do cabeçalho Marca o inicio e o fim do título Marca o início e o fim do do corpo da página O documento HTML básico se divide principalmente em duas TAGS principais das vistas acima, são elas: <HEAD> e <BODY>. 4.1.<HEAD>

12 Esta TAG contém informações sobre o documento. O elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser. Exemplo: Todo documento WWW deve ter um título, onde principalmente esse título é referenciado em buscas pela rede, dando uma identidade ao documento. Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela. Portanto, este é um dos motivos pelo qual sugere se que ao dar um título a uma página, que ele seja sugestivo, evitando se títulos genéricos como "Introdução", por exemplo. O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos sites de busca da Internet. 4.2.<BODY> Tudo que estiver contido em <BODY> (Corpo do Texto) será mostrado na janela principal do browser, sendo apresentado ao leitor. No corpo do texto pode conter por exemplo: imagens, vídeos, sons, cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, formulários, animações entre outros. Exercício 1: Com o que foi visto até agora, vamos criar uma página HTML simples. Passo 1: Abrir o Ambiente de Desenvolvimento WEB (Iniciar>Desenvolvimento WEB>Quanta Plus) Passo 2: Digite o código exatamente como está da abaixo. Passo 3: Após digitá-lo salva em uma pasta ( Crie uma pasta no computador com seu nome, e dentro dela outra pasta com o nome Minhas páginas HTML ) com o nome Minha_primeira_página.html Como salvar: Para Salvar, é simples: Basta primeiramente clicar no menu Arquivo> Salvar.

13 Localiza se onde está sua pasta e é só salvar quando estiver dento de Minhas páginas HTML Para ver o resultado deste exemplo abra o Internet Mozilla Firefox, e na barra de endereço digite C:\Meus documentos\exemplo1.html. Veja a figura 1.2 Figura 2 Resultado do Exercício 1 Perceba que existe uma parte do texto que não é mostrada. Perceba que existe um texto após <! > Isto é um cometário e não será mostrado na página. Cada tag, dentro dela, poderão existir atributos para implementar, veremos então abaixo alguns destes atrubutos da TAG <BODY> Atributos de <BODY> Dentro da TAG <BODY> é possível ter vários atributos e podemos definir, por exemplo, as cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d água): Onde: Tabela 2 Atrabutos da TAG <BODY> BGCOLOR Background Color(ou cor de fundo da página). A cor padrão é branca quando não se determina cor. TEXT Cor dos textos da página (padrão: preto). LINK Cor dos links (padrão: azul). ALINK Cor dos links quando acionados, clicados (padrão: vermelho).

14 VLINK Cor dos links depois de visitados (padrão: azul escuro ou roxo) BACKGROUN Caminho para a figura de fundo D Na TAG <BODY> acima, percebemos que por exemplo, no bgcolor temos #rrggbb. Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos tais como #FF80A0. Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores, tirados da paleta VGA do Windows por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas. BACKGROUND: Indica a URL da imagem a ser replicada no fundo da página, como uma marca imagem de fundo. O significado do link, alink e vlink, não serão discutidos agora, mas estas TAGS servirão para o uso de links, ou seja, atalho para outras páginas, o que será visto posteriormente. Nota: Os 16 nomes de cores aceitos desde a versão 3.2 da HTML são estes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Exercício 2: Abra novamente o editor de texto e digite o código abaixo

15 Salve com o nome segunda_pagina.html O resultado da página poderá ser feito no próprio programa ou como visualizamos o primeiro exercício. Para visualizar pelo programa, clique no ícone em destaque na imagem abaixo Konqueror, como foi visualizado o primeiro exercício. Veja o resultado: Agora vamos Visualizar pelo Opa! Aconteceu algo errado! Os acentos viraram caracteres malucos? Bom, é preciso falar para o navegador qual codificação ele está usando. Para que nosso texto seja mostrado normalmente, iremos criar uma nova página e colocar nossas informações nela para sair corretamente. Primeiramente vamos criar um novo arquivo: Clique no ícone Kommander Quick Start Dialog( Figura abaixo ).

16 Irá abrir uma janela(imagem ao lado) e desmarque as opções Mostrar DTD e Meta Quanta. Confirme clicando em OK após estas alterações. Aparecerá um documento com a estrutura que vimos anteriormente, mas com uma novidade, a TAG Não é preciso entendermos a fundo sobre esta TAG agora, pois o importante é que ela resolverá nosso problema. Agora com esta estrutura montada, perceba que no rodapé da página existe a página que salvamos e este novo documento. Com base nisso, clique em Segunda_página.html e copie o que está entre da tag <title> e o que está dentro da tag <body>, e faça alteração no texto como mostra a figura abaixo: Salve como Segunda_página_modificada.html, e volte para ver esta página como ficou. Viu a diferença? Concordo que é muito chato ficar toda vez digitando todo o código principal. Sabemos então que, para nossa página sair mais interessante, o uso da TAG <meta> para a codificação é muito importante. Portanto, vamos criar um novo documento, como feito no exemplo anterior, e vamos fazer o Exercício 3, já que ela nos dá a estrutura principal da nossa página.

17 Exercício 3: Algumas vezes é melhor colocar na nossa página uma imagem de fundo, no lugar de uma cor de fundo, não acha? Então, que tal agora colocar uma imagem ao invés da cor de fundo?? Vamos digitar o arquivo para depois explicar como colocar a imagem. Deixe o seu arquivo como mostra abaixo Agora teremos que ir buscar na internet alguma imagem para colocar como plano de fundo. Que tal escolher uma imagem no Firefox, por exemplo? Após escolhida a imagem, salve a dentro da pasta que estará nossas páginas HTML, no nosso caso, dentro de Minhas Páginas HTML. Escolhemos a imagem com o nome firefox wallpaper.jpg. Portanto colocaremos, do mesmo jeito que salvamos, o nome do arquivo dentro da TAG <body>, como mostra abaixo. Salve com o nome Segunda_pagina_com_background.html, e faça a visualização novamente. Veja o resultado:

18 Nota: Deve se ter cuidado na hora de escolher o tipo de plano de fundo ou cor de fundo, pois por exemplo, se neste caso tivesse usado um plano de fundo com cor mais clara, provavelmente ficaria difícil enxergar as letras do texto. É importante que mesmo que sua página tenha uma imagem de fundo, ela também tenha uma cor de fundo. Sempre coloque uma cor de fundo parecida com o do plano de fundo, pois pode ser que por algum motivo a imagem não seja carregada. Então, o Leitor da sua página poderá ainda sim, mesmo não visualizando a imagem, ver o texto escrito 6.Cabeçalho(Títulos) <Hn></Hn> Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>: Esses cabeçalhos são mostrados no browser da seguinte forma: Exercício 4: Vamos agora utilizar a página do exercício 3, salvando a como Pagina_com_cabeçalho.html. Observe abaixo e faça as alterações necessárias:

19 Salve novamente, mas como a página já tem um nome, precisa se só atualizar as alterações. A seguir vamos ver algo mais sobre os cabeçalhos. Aninhamento de cabeçalhos Os cabeçalhos não podem ser aninhados, isto é, a formatação pode produzir algum resultado próximo ao desejado. Observe abaixo o código e como ficou logo em seguida: Mas o mais comum é que os browsers "entendam" essa formatação como sendo: Ou seja, como se estivesse faltando uma etiqueta de fechamento de <h2> antes de <h1> e faltando uma abertura de <h2> depois do fechamento de <h1>, oferecendo o seguinte resultado: Os editores WYSIWYG naturalmente não permitem o aninhamento de cabeçalhos. Alinhamento de cabeçalhos Os cabeçalhos têm atributos de alinhamento: Como resultado:

20 7.Fonte <FONT></FONT> Até agora construímos uma página relativamente simples. Percebemos então que o texto todo fica de uma cor só até agora. Mas será que a página só poderá ficar assim? Não poderei codificar o tipo de fonte, nem o tamanho, muito menos a cor? Claro que isso é possível! Para isso que serve a TAG <FONT> Para utilizar as mudanças acima devemos complementar a TAG <FONT> com os seus atributos, como por exemplo: Onde: Tabela 3 Artibuotos da TAG <FONT> SIZE Determina o tamanho da fonte. Esta opção especifica o tamanho da fonte utilizada; FACE Determina o tipo de fonte que será usado. Se nenhuma fonte for colocada, será usada a fonte padrão. Esta opção permite que seja definida uma fonte diferente para o texto; COLOR Determina a cor da forte. Esta opção especifica a cor do texto. Seu valor pode ser especificado pelo código hexadecimal ou, para algumas cores, pelo seu nome em inglês (blue, black, white etc.). Abaixo vemos a diferença das duas TAGs acima: Veremos um pouco sobre cada um dos atributos começando pelo tamanho. A TAG acima produzirá a palavra Texto com o tamanho numero 3(tamanho padrão). Este comando permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar

21 tamanhos relativos a esse, por exemplo: Digite os exemplos e veja a diferença entre eles. Para a seleção das fontes usaremos o atributo FACE; Digite e veja o resultado. Descubra as outras fontes que existe e faça o texto também. As cores são introduzidas também através do elemento <FONT> quando queremos que algumas partes do texto fique diferente da padrão, ou da que foi definida na TAG <BODY>. Usa-se também o sistema RGB para cores (da mesma forma que vimos para cores anteriormente), como mostrado no exemplo a seguir: Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de <BODY>. Mais exemplos: Perceba, como foi dito anteriormente que tanto faz colocar em letras maiúsculas ou minusculas, que o navegador vai interpretar corretamente.

22 8.Estilos de texto Até agora vimos a estrutura principal do HTML, como modificar a cor de todo o texto, como colocar um plano e fundo e como alterar partes do texto, mas e se eu quiser colocar, por exemplo uma palavra em negrito e sublinhado, por exemplo o título? Sim, isso é possível, por isso vamos estudar os estilos. Tabela 4 Estilos Físicos <B> Negrito <I> Itálico <U> Sublinhado. <STRIKE> ou <S> Frase riscada. <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo índice, como em H2O, por exemplo. <SUP> Frase em estilo expoente, como em Km2, por exemplo. Outras TAGs de formatação Temos outras TAGs que dependendo no Navegador, podem um não funcionar corretamente: HTML oferece outras TAGs para formatação Tabela 5 Outras TAGs de Formatação <PRE> Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações <BLOCKQUO É usado para citações longas TE> <ADDRESS> Usado para formatar endereços de e referências a autores de documentos, como por exemplo: <CODE>. Utilizada para relacionar o código-fonte de programas. Geralmente será visualizado em fonte monoespaçada. <STRONG> Utilizada para dar ênfase especial a um trecho de texto. Geralmente será visualizado em fonte <DFN> Utilizada para destacar um definição. Geralmente será visualizado em fonte itálica. <EM> Utilizado para sublinhar parte do texto <CENTER> Utilizada para centralizar um texto na tela. A TAG <PRE> permite criar textos pré formatados semelhantes aos produzidos em editores de texto. Espaços em branco, marcas de tabulação e quebras de linha são reconhecidos e colocados nos respectivos pontos de inserção. Textos pré formatados são representados pela fonte mono espaçada definida pelo usuário.

23 Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa marcação dentro de outra marcação que já apresente tabulações e espaços específicos. Dentro de um texto pré formatado: É permitido utilizar links e âncoras. Entretanto, não existe certeza de como o browser interpretará essas marcações. A TAG <P> não deve ser utilizado. Não devem ser usados outros comandos de formatação, tais como os de listas e de cabeçalhos. Observe abaixo: que resultaria na seguinte representação na tela: A Tag <ADDRESS> formata informações tais como o endereço, a assinatura e a autoria de quem publicou a página. Normalmente, estes dados são colocados no final de um documento e, geralmente, serão visualizados em itálico. Exemplo:

24 O resultado seria: Exercício 5: Produza uma página utilizando os conhecimentos adquiridos até agora. Faça uma página com se fosse um currículo seu, colocando alguns dados seus, o que gosta( Tipo de música por exemplo ). Chame-a de meus_dados.html. 9.Parágrafo <P> Para separar blocos de texto, usamos o elemento <P>, por exemplo: que produz o seguinte: Combinando parágrafos e quebras de linha(veremos em breve), temos por exemplo: O resultado da marcação acima é: A TAG <P> tem atributo de alinhamento, semelhante aos cabeçalhos, como nos exemplos a seguir: Como vimos anteriormente, podemos também alinhar a esquerda(align=left), que já é padrão e também a direita(align=right). Exercício 6: Para Exercitar. Pegue a página meus_dados.html e implemente com estes conhecimentos de parágrafos. Salve a página, antes de modificar como meus_dados_modificados.html 10.Quebra de linha <BR> Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos

25 uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos. Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens. 11.Linhas horizontais <HR> A TAG <HR> insere uma linha horizontal que tem diversos atributos, oferecendo resultados diversos. Exercício 6: Para exercitar, através do meus_dados_modificados.html, implemente as linhas horzontais da melhor forma possivel. 12.HiperTexto(Hyperlink)<A> Agora teremos a oportunidade de interligar todas as nossas páginas através dos hyperlinks Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro documento (ou a outra parte do próprio documento). Você já deve ter visto em alguma página internet exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links, onde normalmente, o mouse vira uma mãozinha e ao clicar chamamos (abrimos) um outro documento, página web ou figura por exemplo. Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: Onde: arquivo_destino: é o endereço do documento de destino, da página ou imagem a qual queremos abrir. âncora: é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino. Atributos A TAG <A> tem vários atributos que são utilizados de acordo com a ação associada ao link. Os mais usados são apresentados a seguir: HREF TARGET NAME Indica o arquivo de destino da ligação de hipertexto. Indica o frame em que será carregado o arquivo_destino. Maiores detalhes na seção sobre frames. Marca um indicador, isto é, uma região de um

26 documento como destino de uma ligação Caminhos (uso de Links) Os links podem estar indicados como caminhos relativos ou absolutos. Caminho Relativo O caminho relativo pode ser usado sempre que queremos fazer referência a um documento armazenado no mesmo servidor do documento atual. Através do campo de endereços do browser, é possível identificar se um documento (página) que está sendo visualizado está dentro de algum diretório (pasta). Como por exemplo se estivermos em um browser acessando a página da FACCAT e vemos o seguinte endereço: O que podemos concluir é que o documento que está sendo visualizado no momento, chamado apostila_de_informatica.html, está localizado dentro de um diretório (pasta) chamado apostilas do servidor Então para escrevermos por exemplo um link deste documento (apostila_de_informatica.html) para um documento chamado doc.html que está localizado no diretório /apostilas/documentos/ do mesmo servidor tudo que precisamos fazer é escrever: <A HREF="documentos/doc.html"> Exemplo de Caminho Relativo </A> Para usar links com caminhos relativos é preciso, portanto, conhecer a estrutura do diretório do servidor no qual estamos trabalhando, pois devemos indicar todo o caminho onde está o documento no qual estamos nos referindo no link. Quando há alguma dúvida, o melhor é usar o caminho absoluto. Caminho Absoluto Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo: <A HREF="http://www.faccat.br"> FACCAT - Faculdades de Taquara </A> Que oferece um link FACCAT - Faculdades de Taquara que ao ser clicado com o mouse abrirá a página cujo endereço é Com a mesma sintaxe, é possível escrever links para qualquer servidor de informações da Internet. Indicadores (uso de Links) Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto. A formatação: <A NAME="inicio"> Indicadores (uso de links) </A> faz com que a âncora Indicadores (uso de links) seja o destino de um link. Se escrevermos: <A HREF="#inicio"> Topo do Documento </A> teremos uma ligação hipertexto para um trecho deste mesmo documento. Exercício 6: Vamos agora treinar os indicadores. Vamos fazer uma página sobre as ferramentas estudadas até aqui. Ou seja. Elabore um pequeno texto sobre: Inkscape, Gimp, BrOffice. Faça no inico da página um link para cada um dos conteudos. E em cada conteudo, dê a opção para ir ao topo. Veja como vai funcionar isso. Salve como Ferramentas_Livres Exercício 7: Agora, vamos criar links entre suas páginas criadas. Crie uma página chamada index.html com os

27 links de todas as páginas criadas até agora. Se preferir(o que é importante), em cada página crie os mesmos links para o acesso mais rápido. 13.Lista de caracteres 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 caracter desejado, e um ; final. Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência: Entidade Caracter Significado Entidade Caracter Significado < < Menor que e e aspas simples (esquerda e direita) > > Maior que e & & E comercial «e» e «e» aspas angulares simples (esquerda e direita) aspas angulares duplas (esquerda e direita) ˆ Espaço º º ordenal masculino ˆ acento circunflexo ª ª ordinal feminino acento til travessão 'en' acento trema travessão 'em' &cute; acento agudo hífen oculto cedilha macron " " aspas duplas reticências e e aspas duplas (esquerda e direita) barra vertical euro marcador (bullet) centavo parágrafo libra esterlina parágrafo legal trade mark espadas marca registrada paus copyright copas ouros Outras sequências de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com os caracteres mais utilizados em Português:

28 Entidade Caracter Entidade Caracter Entidade Caracter Entidade Caracter á á Á Á í í Í Í â â Â Â ó ó Ó Ó à à À À ô ô Ô Ô ã ã Ã Ã õ õ Õ Õ ç ç Ç Ç ú ú Ú Ú é é É É ü ü Ü Ü ê ê Ê Ê Como vemos, as sequências de escape são sensíveis à caixa. 14.Tabela de Cores Hexadecimal

29 15.Imagens<IMG> A TAG <IMG> insere imagens que são apresentadas junto com os textos. E segue a seguinte forma: Um atributo SRC deve estar presente, onde URL_imagem é o URL do arquivo que contém a imagem que se quer inserir. Pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, não é conveniente). Assim, escrevendo: <IMG SRC = "nome_da_figura.extensão"> ou, se ela estiver dentro de uma pasta no mesmo servidor:

30 <IMG SRC = "nome_da_pasta/nome_da_figura.extensão"> Por exemplo, se quisermos inserir na página uma imagem chamada arvore.gif localizada no mesmo servidor e na mesma pasta, a tag seria assim: <IMG SRC = "arvore.gif"> As imagens usadas na Web, normalmente são armazenadas em arquivos com as seguintes extensões:.gif,.jpg (ou.jpeg),.png,.bmp. Atributos Básicos de Imagem ALT WIDTH e HEIGHT Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente. Também aparecerá ao passar o mouse sobre a imagem. <IMG SRC="URL_imagem" ALT="descrição_da_imagem"> Dessa forma: <IMG SRC="newred.gif" ALT="Novo!!!"> Atributos de dimensão da imagem, em pixels4. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem. <IMG SRC="URL_imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura"> Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas. BORDE R ALIGN Quando uma frase é marcada como âncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de âncora, ganha uma borda que indica sua condição de link. Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe. Se quisermos uma borda mais larga: <A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=4> </A> Se quisermos uma imagem sem borda: <A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=0> </A> Essa borda pode ser apresentada também em imagens que não são âncora de links. Basta aplicar, por exemplo, a formatação: <IMG SRC="figura1.gif" ALT="Minha Foto" BORDER=2> <IMG SRC="imagem.extensão" ALT="descrição" ALIGN=alinhamento_desejado> Existem também atributos de alinhamento, que produzem os seguintes resultados: ALIGN=TOP Alinha o texto adjacente com o topo da imagem. ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem. ALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem. ALIGN=RIGHT Alinha imagem à direita, e o que houver ao redor a partir do topo da imagem. ALIGN=LEFT Alinha imagem à esquerda, e o que houver ao redor a partir do topo da imagem. Para ter duas imagens, uma em cada margem, numa mesma linha, escreva: entre as imagens! Isto resulta em:

31 E o resultado ficará parecido com o abaixo: Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento, ou seja: Suponhamos um texto mais ou menos curto, que desejamos colocar com a imagem ilustrativa, mas gostaríamos que este trecho já estivesse abaixo da imagem! De acordo com o comprimento da primeira frase, não seria possível usar o alinhamento TOP. Para conseguir isso, seria necessário incluir diversos <BR> consecutivos, inserindo linhas em branco: mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, então, o atributo CLEAR para <BR>. Com esse atributo, podemos, por exemplo ter um texto posicionado no ponto em que a margem direita fica livre, com <BR CLEAR=RIGHT> ou no ponto em que a margem esquerda fica livre, com <BR CLEAR=LEFT> Dessa maneira, podemos controlar bem a posição relativa dos textos. Também pode-se posicionar o texto no ponto em que ambas as margens estão livres. Isso é conseguido com <BR CLEAR=ALL> E, assim, vimos tudo sobre quebras de linha depois de imagens! Molduras de Imagem Para melhorar ainda mais a apresentação das imagens junto com os textos, foram desenvolvidos atributos de moldura. Estes atributos definem o espaço - vertical e horizontal - deixado entre as imagens e os textos circundantes: <IMG SRC="imagem.extensão" VSPACE=espaço_vertical> <IMG SRC=" imagem.extensão " HSPACE=espaço_horizontal> Outros exemplos: <IMG SRC="foto.gif" WIDTH="148" HEIGHT="95" ALIGN=left VSPACE="30"> <IMG SRC="foto.gif" WIDTH="160" HEIGHT="71" ALIGN=right HSPACE="30"> Abaixo, temos um exemplo com os dois atributos, através da formatação: <IMG SRC="foto.gif" ALIGN="LEFT" WIDTH="63" HEIGHT="68" HSPACE="20" VSPACE="20"> 16.Tabelas <TABLE> A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa. A maior diferença entre tabelas em HTML e em editores como o MS-Word, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer deste capítulo. As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos páginas organizadas em colunas, sendo uma delas reservada aos links de navegação dentro de cada seção. Tabelas implementam um conceito importante de layout: as grades, segundo as quais organizamos textos e ilustrações de maneira harmoniosa. Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, formulários e várias outras formatações - inclusive outras tabelas. Novas versões de HTML e de browsers

32 populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis. Elementos básicos de tabelas A base de uma tabela é determinada por <TABLE>...</TABLE>, que delimita uma tabela. Um atributo básico é BORDER, que indica a apresentação da borda. <TABLE BORDER="borda">...</TABLE> Títulos, linhas e elementos <CAPTION>...</CAPTION> <TR>...</TR> <TH>...</TH> <TD>...</TD> Define o título da tabela Delimita uma linha Define um cabeçalho (dentro de <TR>) Delimita um elemento ou célula (dentro de <TR>) Veremos agora um exemplo de tabela simples com borda. É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3). Para uma página sem borda, podemos tratar de duas formas: <TABLE BORDER="0">...</TABLE> ou <TABLE>...</TABLE> Dica: A formatação de tabelas é complicada, pois dependendo do tamanho passa a ser complexa pois fazemos uso de seus diversos atributos. A melhor opção, sem dúvida, é usar os editores WYSIWYG(Como o quanta). Diversas extensões de tabelas possibilitam a apresentação de efeitos muito bons nas páginas. A primeira delas é a cor de fundo e a cor da borda:

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

Leia mais

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

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

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

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

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web.

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web. 1 1 INTRODUÇÃO Antes de começarmos a trabalhar HTML, é necessário que se conheça alguns termos básicos que envolvem esta linguagem. Internet é um conjunto de pequenas redes de computadores, formando assim

Leia mais

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Março de 2007 Sumário Página 1 INTRODUÇÃO À LINGUAGEM HTML...3 2 EDIÇÃO DE DOCUMENTOS

Leia mais

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

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

Leia mais

INTERNET -- NAVEGAÇÃO

INTERNET -- NAVEGAÇÃO Página 1 INTRODUÇÃO Parte 1 O que é a Internet? A Internet é uma rede mundial de computadores, englobando redes menores distribuídas por vários países, estados e cidades. Ao contrário do que muitos pensam,

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

André Kawamoto NE31A

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

Leia mais

Profa. Reane Franco Goulart

Profa. Reane Franco Goulart Profa. Reane Franco Goulart A linguagem HTML (Hypertext Markup Language) tem o objetivo de formatar textos através de marcações especiais denominadas tags, para que possam ser exibidos de forma conveniente

Leia mais

MINISTÉRIO DA EDUCAÇÃO

MINISTÉRIO DA EDUCAÇÃO MINISTÉRIO DA EDUCAÇÃO SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SANTA CATARINA CAMPUS SÃO JOSÉ TECNICO EM TELECOMUNICAÇÕES REDES DE COMPUTADORES

Leia mais

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

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

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

LABORATÓRIO DE INTERNET FRONTPAGE I LABORATÓRIO DE INTERNET FRONTPAGE Prof. Antonio Geraldo da Rocha Vidal II SUMÁRIO Introdução...3 Construindo um Web Site...4 Iniciando...4 Administrando o Site...5 Navegação...5 Trabalhando com Páginas...6

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Apostila de Introdução à Linguagem HTML. Profa. Flávia Pereira de Carvalho

Apostila de Introdução à Linguagem HTML. Profa. Flávia Pereira de Carvalho Apostila de Introdução à Linguagem HTML Profa. Flávia Pereira de Carvalho Outubro de 2004 Sumário Página Introdução à Linguagem HTML... 3 Edição de Documentos HTML... 4 Publicação de Documentos na Internet...

Leia mais

MÓDULO 1 - xhtml Básico

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

Leia mais

Microsoft Internet Explorer. Browser/navegador/paginador

Microsoft Internet Explorer. Browser/navegador/paginador Microsoft Internet Explorer Browser/navegador/paginador Browser (Navegador) É um programa que habilita seus usuários a interagir com documentos HTML hospedados em um servidor web. São programas para navegar.

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

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

Leia mais

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

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

Leia mais

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB -

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Taquara - RS Sumário Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html

Leia mais

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 ESCOLA ESTADUAL PROF. JOSÉ BARROSO TOSTES PROFESSOR: ESP. ANDREW RODRIGUES CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 1 APOSTILA DE INTRODUÇÃO À LINGUAGEM

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Internet Internet é o conjunto de diversas redes de computadores que se comunicam entre si Internet não é sinônimo de WWW (World Wide

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

Princípios de Internet e Termos mais Utilizados. Internet

Princípios de Internet e Termos mais Utilizados. Internet Princípios de Internet e Termos mais Utilizados Internet A Comunicação é a melhor palavra para descrever a Internet. São serviços e facilidades que, para algumas pessoas, é o lugar onde elas encontram

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

2 HTML Inserindo objetos

2 HTML Inserindo objetos 2 HTML Inserindo objetos Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Imagem...3 Links...5 Links para locais da mesma página...6 Áudio e vídeo...8

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

4 - HTML Básico: 4.2 - Criando documentos HTML:

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

Leia mais

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

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

Leia mais

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

Leia mais

Ferramentas para Multimídia e Internet - 1486

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

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

Leia mais

WEB DESIGNER WEB DESIGNER

WEB DESIGNER WEB DESIGNER WEB DESIGNER 1 WEB DESIGNER INICIO DO CURSO DE HTML 4.0 Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador

Leia mais

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

Leia mais

A estrutura de um documento HTML apresenta os seguintes componentes:

A estrutura de um documento HTML apresenta os seguintes componentes: A estrutura de um documento HTML apresenta os seguintes componentes: Titulo do Documento texto, imagem, links,... As etiquetas HTML não são sensíveis

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

APOSTILA DE FRONTPAGE 2000

APOSTILA DE FRONTPAGE 2000 APOSTILA DE FRONTPAGE 2000 Pagina 1 de 14 Introdução A cada dia verificamos que a informação é uma ferramenta de extrema necessidade em qualquer negócio. Sabendo disto, diversas empresas investem em tecnologias

Leia mais

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

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

Leia mais

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Fevereiro de 2012 Sumário Página 1 INTRODUÇÃO À LINGUAGEM HTML... 3 2 EDIÇÃO DE DOCUMENTOS

Leia mais

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

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

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:

Leia mais

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB -

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Taquara - RS Sumário Página 1 INTRODUÇÃO À LINGUAGEM HTML... 3 2 EDIÇÃO DE DOCUMENTOS

Leia mais

Programação para a Web - I. José Humberto da Silva Soares

Programação para a Web - I. José Humberto da Silva Soares Programação para a Web - I José Humberto da Silva Soares Fundamentos de Internet Rede Mundial de Computadores; Fornece serviços, arquivos e informações; Os computadores que têm os recursos são chamados

Leia mais

Linux. Educacional. Tutorial Buzzword

Linux. Educacional. Tutorial Buzzword Linux Educacional Tutorial Buzzword Para trabalhar com o programa Buzzword online, é necessário que crie uma conta no site. Para isso acesse o endereço - https://buzzword.acrobat.com/ Para criar uma conta

Leia mais

HTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,...

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

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

Manual do Usuário Janeiro de 2016

Manual do Usuário Janeiro de 2016 Manual do Usuário Janeiro de 2016 SOBRE CMX CMX é uma interface que dá acesso aos estudantes a milhares de atividades, exercícios e recursos todos posicionados com os padrões e conceitos curriculares.

Leia mais

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

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

Leia mais

STI - Seção Técnica de Informática. Dreamweaver. DreamWeaver 1

STI - Seção Técnica de Informática. Dreamweaver. DreamWeaver 1 Dreamweaver DreamWeaver 1 Índice Introdução 1. Conhecendo a Área de Trabalho 1.1. Barra de Título 1.2. Barra de Menus 1.3. Guias 1.3.1 Guia "Common" 1.4. Barra de "Edição do Documento" 1.5. Painéis 1.6.

Leia mais

INTRODUÇÃO À PROGRAMAÇÃO

INTRODUÇÃO À PROGRAMAÇÃO Departamento de Informática INTRODUÇÃO À PROGRAMAÇÃO Apontamentos de (HyperText Markup Language) Prof. Carlos Pampulim Caldeira Évora, Março de 2003 ÍNDICE 1. O QUE É O?...1 1.1 INTRODUÇÃO...1 1.2 QUE

Leia mais

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

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

Leia mais

Introdução. História. Como funciona

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

Leia mais

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

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

Leia mais

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

Professor Paulo Najar www.aprenderdigital.com.br

Professor Paulo Najar   www.aprenderdigital.com.br ~ 1 ~ O QUE É O BROFFICE? Broffice.org é o nome de um conjunto de programas de escritório livre (free software), disponível na internet gratuitamente (no site www.broffice.org) que oferece ferramentas

Leia mais

Introdução à Informática

Introdução à Informática Introdução à Informática Aula 23 http://www.ic.uff.br/~bianca/introinfo/ Aula 23-07/12/2007 1 Histórico da Internet Início dos anos 60 Um professor do MIT (J.C.R. Licklider) propõe a idéia de uma Rede

Leia mais

NOÇÕES BÁSICAS DE INTERNET

NOÇÕES BÁSICAS DE INTERNET UNIVERSIDADE REGIONAL INTEGRADA DO ALTO URUGUAI E DAS MISSÕES URI CAMPUS SANTO ÂNGELO NOÇÕES BÁSICAS DE INTERNET Disciplina: Informática Instrumental Profa: M. Sc. Regiane Klidzio CONTEÚDO Março, 2010

Leia mais

Microsoft Office FrontPage 2003

Microsoft Office FrontPage 2003 Instituto Politécnico de Tomar Escola Superior de Gestão Área Interdepartamental de Tecnologias de Informação e Comunicação Microsoft Office FrontPage 2003 1 Microsoft Office FrontPage 2003 O Microsoft

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

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

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais

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

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

Leia mais

Criação de Web Sites I

Criação de Web Sites I WebDesigner / IBPINET Criação de Web Sites I Anexos Avaliação e Projetos Publicação do site Anexos página 1 1. Avaliação e Projetos 1.1. Questões As questões tratam de assuntos discutidos em sala de aula

Leia mais

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000 UNIVERSIDADE FEDERAL DO PARANÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS ESTUDANTIS COORDENAÇÃO DE DESENVOLVIMENTO DE RECURSOS HUMANOS UNIDADE DE QUALIFICAÇÃO FRONTPAGE 2000 Módulo I Hamilton Chaiben

Leia mais

Internet. O que é a Internet?

Internet. O que é a Internet? O que é a Internet? É uma rede de redes de computadores, em escala mundial, que permite aos seus utilizadores partilharem e trocarem informação. A Internet surgiu em 1969 como uma rede de computadores

Leia mais

Módulo 11 A Web e seus aplicativos

Módulo 11 A Web e seus aplicativos Módulo 11 A Web e seus aplicativos Até a década de 90, a internet era utilizada por acadêmicos, pesquisadores e estudantes universitários para a transferência de arquivos e o envio de correios eletrônicos.

Leia mais

1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

Resumão Writer ( Broffice.org)

Resumão Writer ( Broffice.org) Resumão Writer ( Broffice.org) Resumo BrOffice.org Cespe O Broffice.org é um pacote de programas para escritório, do mesmo nível do pacote Microsoft Office. Os dois pacotes trazem programas parecidos e

Leia mais

Manual de Utilização

Manual de Utilização Se ainda tiver dúvidas entre em contato com a equipe de atendimento: Por telefone: 0800 642 3090 Por e-mail atendimento@oisolucoespraempresas.com.br Introdução... 3 1. O que é o programa Oi Backup Empresarial?...

Leia mais

Este arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br

Este arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br Pg 1 Introdução... Pg 2 Exemplo completo... Pg 3 Passo 2... Pg 4 Hyperlinks e Texto dentro de uma caixa... Pg 5 Tag para cores e Tabelas... Pg 6 Formatar o Texto... Pg 7 Download... Pg 8 Frame... Pg 9

Leia mais

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva Conceitos Fundamentais de Microsoft Word Professor Rafael www.facebook.com/rafampsilva Introdução É um editor de texto ou processador de texto? editores de texto: editam texto (assim como uma máquina de

Leia mais

Instrução de Trabalho Base de Conhecimento

Instrução de Trabalho Base de Conhecimento Aprovado por Comitê da Qualidade Analisado criticamente por Dono do processo 1. OBJETIVOS Esta instrução de trabalho tem como objetivo orientar os colaboradores da SINFO, de como a será mantida e acessada.

Leia mais

4.14 - Imagens: src único atributo que não pode ser omitido neste TAG Nota: img

4.14 - Imagens: <img src=...> src <img src=tecnologia.jpg> único atributo que não pode ser omitido neste TAG Nota: img 4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

Programação HTML Construção de Páginas para WEB 47

Programação HTML Construção de Páginas para WEB 47 Programação HTML Construção de Páginas para WEB 47 INICIANDO EXEMPLO3.HTML Crie um novo arquivo html chamado exemplo3.html dentro da pasta exemplos. Após os exercícios e trabalhos anteriores, nossa pasta

Leia mais

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

Leia mais

OS LINKS Os termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto.

OS LINKS Os termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto. Apostila de web estático Prof. Eduardo 2 CAPÍTULO PADRÕES DE FUNDO Uma Home page pode conter uma textura como padrão de fundo, um arquivo no formato gif ou jpg, ou utilizar as cores do padrão RGB. A notação

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas

Leia mais

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

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

Leia mais

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

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

Leia mais

Sumário. Os Créditos que Faltavam Introdução

Sumário. Os Créditos que Faltavam Introdução Sumário Os Créditos que Faltavam Introdução Parte Um: Bem-vindo à Web Capítulo 1: Preparação para a web 9 Apresentação da World Wide Web 9 Navegadores 10 Servidores web 14 Planejamento de um website 15

Leia mais

Introdução à Tecnologia Web. Ferramentas e Tecnologias de Desenvolvimento Web. Profª MSc. Elizabete Munzlinger www.elizabete.com.

Introdução à Tecnologia Web. Ferramentas e Tecnologias de Desenvolvimento Web. Profª MSc. Elizabete Munzlinger www.elizabete.com. IntroduçãoàTecnologiaWeb FerramentaseTecnologiasde DesenvolvimentoWeb ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br FerramentaseTecnologiasde DesenvolvimentoWeb

Leia mais

4.14 - Imagens: SRC único atributo que não pode ser omitido neste tag Nota: img

4.14 - Imagens: <IMG SRC=...> SRC <IMG SRC=tecnologia.jpg> único atributo que não pode ser omitido neste tag Nota: img 4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

Como criar uma página WEB

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

Leia mais

Tecnologias da Informação e Comunicação. Principais tipos de serviços da Internet

Tecnologias da Informação e Comunicação. Principais tipos de serviços da Internet Tecnologias da Informação e Comunicação Principais tipos de serviços da Internet Introdução à Internet Serviços básicos Word Wide Web (WWW) Correio electrónico (e-mail) Transferência de ficheiros (FTP)

Leia mais

Parte 5 - Criação de cursos à distância no Modelo Fechado

Parte 5 - Criação de cursos à distância no Modelo Fechado Parte 5 - Criação de cursos à distância no Modelo Fechado Neste capítulo iremos estudar como montar um curso à distância que, embora acessível via a Internet, tenha acesso controlado. Para isto, teremos

Leia mais

Oficina de Software Livre.

Oficina de Software Livre. Professor: Igor Patrick Silva Contato: (38)88037610 E-Mail: igorsilva88037610@hotmail.com 1 Índice CAP. 1 O computador e seus componentes 2 CAP. 2 O que é software livre e o que é software proprietário

Leia mais

WWW - World Wide Web

WWW - World Wide Web WWW World Wide Web WWW Cap. 9.1 WWW - World Wide Web Idéia básica do WWW: Estratégia de acesso a uma teia (WEB) de documentos referenciados (linked) em computadores na Internet (ou Rede TCP/IP privada)

Leia mais

Curso destinado à preparação para Concursos Públicos e Aprimoramento Profissional via INTERNET www.concursosecursos.com.br INFORMÁTICA.

Curso destinado à preparação para Concursos Públicos e Aprimoramento Profissional via INTERNET www.concursosecursos.com.br INFORMÁTICA. INFORMÁTICA Aula Gratuita (clique aqui e assista a aula) INTERNET (Navegadores) NAVEGADORES Para que possamos explorar todos os recursos que a Web nos oferece, precisamos de um programa chamado navegador.

Leia mais

MICROSOFT WORD 2007. George Gomes Cabral

MICROSOFT WORD 2007. George Gomes Cabral MICROSOFT WORD 2007 George Gomes Cabral AMBIENTE DE TRABALHO 1. Barra de título 2. Aba (agrupa as antigas barras de menus e barra de ferramentas) 3. Botão do Office 4. Botão salvar 5. Botão de acesso à

Leia mais

Fone: (19) 3234-4864 E-mail: editora@komedi.com.br Site: www.komedi.com.br HTM3.0. Tutorial HTML. versão 4.01

Fone: (19) 3234-4864 E-mail: editora@komedi.com.br Site: www.komedi.com.br HTM3.0. Tutorial HTML. versão 4.01 Fone: (19) 3234-4864 E-mail: editora@komedi.com.br Site: www.komedi.com.br HTM3.0 Tutorial HTML versão 4.01 K O M Σ D I Copyright by Editora Komedi, 2007 Dados para Catalogação Rimoli, Monica Alvarez Chaves,

Leia mais

CONCEITOS BÁSICOS DE INTERNET. Disciplina: INFORMÁTICA 1º Semestre Prof. AFONSO MADEIRA

CONCEITOS BÁSICOS DE INTERNET. Disciplina: INFORMÁTICA 1º Semestre Prof. AFONSO MADEIRA CONCEITOS BÁSICOS DE INTERNET Disciplina: INFORMÁTICA 1º Semestre Prof. AFONSO MADEIRA conceito inicial Amplo sistema de comunicação Conecta muitas redes de computadores Apresenta-se de várias formas Provê

Leia mais

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Aula 1 Desenvolvimento Web Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Plano de Aula Ementa Avaliação Ementa Noções sobre Internet. HTML

Leia mais

Noções de Informática

Noções de Informática Noções de Informática 2º Caderno Conteúdo Microsoft Excel 2010 - estrutura básica das planilhas; manipulação de células, linhas e colunas; elaboração de tabelas e gráficos; inserção de objetos; campos

Leia mais

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word 1 Iniciando o Word 2010 O Word é um editor de texto que utilizado para criar, formatar e imprimir texto utilizado para criar, formatar e imprimir textos. Devido a grande quantidade de recursos disponíveis

Leia mais