OPERAÇÃO DE SOFTWARE E APLICATIVOS

Transcrição

1 OPERAÇÃO DE SOFTWARE E APLICATIVOS 1

2 SUMÁRIO 1 INTRODUÇÃO A WEB O QUE É A WORLD WIDE WEB? COMO FUNCIONA A WWW? SERVIDORES WEB BROWSERS PADRÕES DA WEB O QUE É O HTML? EXTENSÃO.HTM OU.HTML? O QUE É LINGUAGEM DE MARCAÇÃO? ELEMENTOS E ATRIBUTOS ELEMENTOS ATRIBUTOS DAS TAGS ESTRUTURA DO HTML DOCTYPE DECLARATION ELEMENTO HTML ELEMENTO HEAD ELEMENTO TITLE ELEMENTO META ELEMENTO BODY TAGS HTML BÁSICAS CABEÇALHOS PARÁGRAFOS QUEBRAS DE LINHA COMENTÁRIOS EM HTML TAGS HTML BÁSICAS ELEMENTOS E SEUS ATRIBUTOS E VALORES ELEMENTO <META> ELEMENTO <BODY>

3 5.3 ATRIBUTO "align" FORMATAÇÃO DE TEXTO LIGAÇÕES DE HIPERTEXTO ("LINKS") LINKS INTERNOS LINKS LOCAIS OU RELATIVOS LINKS EXTERNOS ATRIBUTO TARGET LISTAS DO HTML LISTAS LISTAS NUMERADAS lista não numerada Listas HTML Definição TABELAS TABELA SIMPLES MODIFICANDO A APARÊNCIA DA TABELA ATRIBUTOS DE LINHAS E CÉLULAS MESCLANDO CÉLULAS FRAMES CRIANDO FRAMES REFERÊNCIAS

4 1 INTRODUÇÃO A WEB 1.1 O QUE É A WORLD WIDE WEB? A World Wide Web (WWW), conhecida como Web, é um sistema de informação que une dados de vários serviços de internet. Enquanto a internet refere-se aos componentes físicos da rede global, a Web refere-se ao corpo da informação compartilhada usando esta rede. 1.2 COMO FUNCIONA A WWW? A informação na Web é armazenada em documentos chamados páginas Web. As páginas Web são arquivos armazenados em computadores chamados servidores Web. Os computadores que leem páginas Web são chamados clientes Web. Clientes Web veem as páginas com um programa chamado navegador Web. 1.3 SERVIDORES WEB Os servidores Web têm um trabalho integral na INTERNET, aguardando sem descanso solicitações dos browsers Web. Que tipo de solicitações? De páginas web, imagens, sons, ou até mesmo filmes. Quando um servidor recebe uma solicitação de algum desses recursos, ele o encontra e então o envia para o browser 1.4 BROWSERS 4

5 São programas que você usa para acessar, visualizar e interagir com páginas Web. A Web permite que browsers de diferentes plataformas interpretem, formatem e exibam páginas Web. Exemplos de browsers são: Internet Explorer; Firefox; Chrome; Opera; Safari. 1.5 PADRÕES DA WEB Os padrões da Web não são feitos pela Netscape ou Microsoft. O corpo regulador da Web é o W3C. W3C significa World Wide Web Consortium. O W3C junta as especificações para os padrões da Web. Os padrões da Web mais essenciais são HTML 1.6 O QUE É O HTML? HTML (Hypertext Markup Language Linguagem de Formatação de Hipertexto). HTML não é uma linguagem de programação, é uma linguagem de marcação. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc.) na Web. O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos. 5

6 Elementos HTML são definidos usando tags (etiquetas) HTML. Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem. 1.8 EXTENSÃO.HTM OU.HTML? Quando você salva um arquivo HTML, você pode usar tanto a extensão.htm quanto.html. 1.9 O QUE É LINGUAGEM DE MARCAÇÃO? Uma linguagem de marcação é a linguagem usada para formatar páginas Web com texto e informações separadamente. Isto assegura que as páginas Web serão acessíveis de qualquer parte do mundo usando qualquer tipo de browser. 6

7 2. ELEMENTOS E ATRIBUTOS 2.1 ELEMENTOS Um elemento é uma estrutura semântica, composta de tag de abertura, conteúdo e tag de fechamento. Os documentos HTML são simples arquivos de texto que contêm "tags de marcação". Essas etiquetas definem os elementos da linguagem HTML e os seus conteúdos. A lista seguinte indica algumas de suas características: As "tags de marcação" do HTML são usadas para definir os elementos. As tags HTML escrevem-se utilizando os caracteres < e >, entre eles o nome do elemento e os seus atributos. A lista seguinte indica algumas de suas características: As "tags de marcação" do HTML são usadas para definir os elementos. As tags HTML escrevem-se utilizando os caracteres < e >, entre eles o nome do elemento e os seus atributos. A primeira tag do par é a tag de início (ou de abertura) e a segunda dopar é a tag de fim (ou de fechamento). Tudo o que se encontrar entre as tags de início e de fim fazem parte do conteúdo do elemento Em HTML as Tags devem ser escritas com letra pequena. A primeira tag do par é a tag de início (ou de abertura) e a segunda do par é a tag de fim (ou de fechamento). Tudo o que se encontrar entre as tags de início e de fim fazem parte do conteúdo do elemento 7

8 O fragmento apresentado a seguir é um elemento da linguagem HTML: <b> Este texto está em negrito</b> Repare nos aspectos seguintes deste fragmento: O elemento começa com a Tag de início (ou abertura): <b> O conteúdo do elemento <b> é apenas texto ("Este texto está em negrito") O elemento termina com a Tag de fim (ou de fecho): </b> O propósito da tag <b> é colocar o conteúdo do elemento HTML em negrito. 2.2 ATRIBUTOS DAS TAGS Tag é um código usado para marcar o início e, onde for requerido, o fim de um elemento HTML. Há, como exposto acima, tags de abertura e de fechamento. Uma tag de abertura é representada por sinal de menor ( < ), um nome de elemento HTML, e um sinal de maior ( > ) (ex. <p>) e deve ser colocada imediatamente antes do início do conteúdo do elemento. Uma tag de fechamento se diferencia de uma tag de abertura apenas por uma barra ( / ) antes do nome do elemento (ex. </p>) e deve ser colocada imediatamente após o fim do conteúdo do elemento Uma tag de fechamento se diferencia de uma tag de abertura apenas por uma barra ( / ) antes do nome do elemento (ex. </p>) e deve ser colocada imediatamente após o fim do conteúdo do elemento Os Atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTML devem ser colocados sempre na tag de abertura, logo após o nome do elemento, precedido de um espaço e é composto de 8

9 um nome de atributo, um sinal de igual (=) e um valor de atributo, cercado por aspas duplas ("). 9

10 3.ESTRUTURA DO HTML 3.1 DOCTYPE DECLARATION O primeiro elemento a aparecer em qualquer documento HTML deverá ser o DOCTYPE. Este indica ao browser qual a versão de HTML que está a ser utilizada e destaca-se dos restantes por aparecer em maiúsculas. O DOCTYPE contém um argumento fundamental, que é aquele em que se faz a especificação do DTD, Document Type Definition. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 3.2 ELEMENTO HTML Os elementos <html> e </html> delimitam o documento HTML. Alguns browsers esperam encontrá-los para identificarem o documento como HTML. 10

11 3.3 ELEMENTO HEAD Os elementos <head> e </head> demarcam a zona do cabeçalho que vai conter informação acerca do documento. Os elementos dentro do elemento head não deveriam ser exibidos por uma navegador. De acordo com o padrão da HTML, somente umas poucas tags são legais dentro da seção head. São elas: <base>, <link>, <meta>, <title>, <style>, e <script>. Existem diversos campos que podem estar dentro do cabeçalho, alguns exemplos: autor(es), titulo da página, palavras-chave, estilos a serem utilizados etc.. 11

12 3.4 ELEMENTO TITLE O Elemento <title> e </title> contém o titulo da sua pagina que irá aparecer na janela do browser. < title> 1º Site </title> 3.5 ELEMENTO META Este elemento tem como objetivo inserir as propriedades do documento, como por exemplo: Autor Data 12

13 Exemplo: < head> < title >1º Site< /title > < meta name="author" content= Luiz Faria" /> < meta name="date" content= 23/07/2011" /> < /head > 3.6 ELEMENTO BODY Aqui está todo o texto, imagens, tabelas e outros elementos que são aquilo que o utilizador vai ver na apresentação no browser da página de Internet. 13

14 4. TAGS HTML BÁSICAS As tags mais importantes na HTML são as tags que definem títulos, parágrafos e quebras de linha. 4.1 CABEÇALHOS Os cabeçalhos são definidos com as tags <h1> a <h6> e podem ser utilizadas para a demarcação dos títulos do seu texto. A <h1> define o cabeçalho maior. A <h6> define o título menor. <h1>este é um título</h1> <h2>este é um título</h2> <h3>este é um título</h3> <h4>este é um título</h4> <h5>este é um título</h5> <h6>este é um título</h6> A HTML automaticamente adiciona uma linha em branco extra antes e após um titulo. 14

15 4.2 PARÁGRAFOS Os parágrafos são definidos com a tag<p>. <p>este é um parágrafo</p> <p>este é outro parágrafo</p> A HTML adiciona automaticamente uma linha em branco extra antes e após um parágrafo. 4.3 QUEBRAS DE LINHA 15

16 A tag <br> é usada quando você quer terminar uma linha, mas não quer começar um novo parágrafo. A tag <br> força a quebra de linha onde quer que você a coloque. <p>este <br> é um para <br>grafo com quebras de linha</p> A tag <br> é uma tag vazia. Ela não tem tag de fechamento. Resultado do uso da tag <br> 4.4 COMENTÁRIOS EM HTML A tag de comentário é usada para inserir um comentário no código fonte HTML. Um comentário será ignorado pelo navegador. Você pode usar comentários para explicar o seu código, o que pode ajuda-lo quando você editar o código fonte numa data posterior.  Observe que você necessita de um ponto de exclamação após a chave de abertura, mas não antes da chave de fechamento. 16

17 4.5 TAGS HTML BÁSICAS 17

18 5 ELEMENTOS E SEUS ATRIBUTOS E VALORES 5.1 ELEMENTO <META> Durante alguns anos a utilização mais frequente da informação fornecida pelo elemento <meta> foi a criação de índices para sites de busca. Atualmente somente alguns buscadores ainda usam esta informação para indexar páginas,e os de maior sucesso ignoram este elemento. Alguns sistemas de busca (não muitos ) usam a informação contida nos elemento meta para indexar as páginas. No fragmento de código seguinte, o elemento <meta> contém uma breve descrição da página: <meta name="description" content= Apostila de OSA"> 18

19 Na parte do código abaixo o elemento <meta> contém uma palavraschave para indexar a página: <meta name="keywords" content="html, CSS "> ATRIBUTO - VALOR <meta name="keywords" content="html, CSS "> <meta name="description" content= Apostila de OSA"> <meta name="reply-to" content= professor_luiz@generation web.com.br"> <meta name="author" content= LUIZ TADEU "> <meta http-equiv="refresh" content=" 5; url= DESCRIÇÃO Contém uma palavras-chave para indexar a página Contém uma breve descrição da página Especifica um endereço de para entrar em contato com o responsável pelo site. Por meio das meta tags, você também pode declarar sua autoria sobre a página, "assinando" seu código fonte Redirecionando o visitante para outra página 5.2 ELEMENTO <BODY> Elemento <body> engloba o corpo do seu documento HTML. Ele possui muitos atributos que possibilitam modificar a aparência da sua página, como cor de fundo ou das letras. Todos os atributos a seguir tem seus valores definidos por cor e os argumentos são o nome ou o número de uma cor: 19

20 Bgcolor: define a cor de fundo de um documento Text: a cor do texto link: a cor dos links alink: a cor dos links ativos atualmente (a página que você está visitando) vlink: cor dos links já visitados 5.3 ATRIBUTO "ALIGN" Para o alinhamento dos elementos parágrafo, cabeçalho entre outros utilizamos o atributo align. ELEMENTO ATRIBUTO - VALOR DESCRIÇÃO <p align= left > Alinha o texto à esquerda <p align= right > Alinha o texto à direita <p align= center > Alinha o texto centralizado <p align= justify > Alinha o texto justificado 20

21 6 FORMATAÇÃO DE TEXTO A linguagem HTML define vários elementos para se formatar um texto, como por exemplo, escrever em negrito, itálico, sublinhado, etc.. TAG <b> <big> <i> <small> <strong> <sub> <sup> <ins> <del> DESCRIÇÃO Define seu texto em negrito Define seu texto grande Define seu texto em itálico Define seu texto pequeno Define seu texto forte Define seu texto subscrito Define seu texto sobrescrito Define texto inserido Define texto apagado 21

22 7. LIGAÇÕES DE HIPERTEXTO ("LINKS") Queremos que uma página HTML possa fazer referência a outras páginas html ou para qualquer outro tipo de arquivo que se encontrem outros lugares da web. Isso é feito de modo muito simples com o elemento a, como segue: <a href= > Geração Web</a> 7.1 LINKS INTERNOS Links internos são aqueles que ligam uma seção de uma página com uma outra seção da mesma página. Por exemplo, se eu quiser fazer uma referência para a seção Hipertexto dessa nossa apostila, basta que eu primeiro defina um nome para a seção Hipertexto e então adicione um link pra ela. Isso efeito da seguinte forma: 22

23 1 - Vou até o início da seção Hipertexto e adiciono o seguinte código, ao invés de simplesmente escrever o título da seção: <a name ="Hipertexto">Hipertexto</a> 2 - Adiciono o link pra essa seção com o seguinte código, <a href ="#Hipertexto">Vá para a seção hipertexto</a> O atributo Name serve apenas para dar um nome para uma posição de uma página html. O valor de name pode ser qualquer um (nesse caso eu coloquei "Hipertexto"). Quando você fizer uma referência a um link interno utilizando o atributo href, você precisa necessariamente adicionar o caractere # (jogo da velha) antes do nome da sua seção - no nosso caso, #Hipertexto - pois do contrário seu navegador tentará abri-lo como um link local. 7.2 LINKS LOCAIS OU RELATIVOS Links locais são aqueles que referenciam um arquivo que esteja no mesmo computador que a sua página. Links locais não contém o no início do endereço. Por exemplo, se no meu documento html eu quiser fazer um link para o arquivo links.html que está na mesma pasta do meu documento, não preciso digital o endereço completo, mas apenas: <a href = links.html ">Acesse os links!</a> Esse tipo de argumento para o href também é chamado de links relativos.se você quiser linkar uma página que esteja do diretório (pasta) superior da sua página, use dois pontos e uma barra antes do nome do arquivo: <a href="../links.html">acesse os links!</a> 23

24 A vantagem de você usar links relativos é que você pode mover todo o seu site para um novo endereço na internet e não precisar reeditar todos os links que apontam para páginas do seu próprio site. 7.3 LINKS EXTERNOS Links externos são aqueles que podem apontar para qualquer arquivo disponível na internet, como por exemplo: <a href=" a Wikipédia!</a> Os links externos precisam necessariamente conter o prefixo e o endereço completo do arquivo. 7.4 ATRIBUTO TARGET Um atributo interessante para o elemento <a href> é o Target, que permite que o link seja aberto numa outra janela do seu navegador. <a href= target="_blank >Acesse a Wikipédia!</a> O argumento do atributo target é o nome da janela do navegador que abrirão link. VALOR DESCRIÇÃO _blank Abre em uma nova aba 24

25 25

26 8.LISTAS DO HTML 8.1 LISTAS Uma lista é uma coleção de itens relacionados. Você usa uma lista para organizar dados como uma sequência de passos ou itens em um grupo. O HTML fornece quatro tipos: Numeradas Não Numeradas Definição Intercaladas 8.2 LISTAS NUMERADAS Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>. Atributo START pode indicar o início da numeração da lista os itens da lista são marcados com números. 26

27 Valores 27

28 8.3 LISTA NÃO NUMERADA A lista não numerada é utilizada quando não há uma relação ou estrutura especifica entre os itens da lista. Sua sintaxe <ul></ul> é exibida na imagem acima. Este tipo de lista também pode ser chamada de nãoordenada. 28

29 8.4 LISTAS HTML DEFINIÇÃO A lista é uma lista de itens, com uma descrição de cada item. A tag <dl> define uma lista de definições. A tag <dl> é usado em conjunto com <dt> (define o item na lista) e <dd> (descreve o item na lista) 29

30 30

31 9. TABELAS As tabelas são perfeitas para organizar e apresentar dados de forma prática. É possível inserir texto, imagens ou links em tabelas, distribuindo melhor as informações em uma página. Este é um dos tópicos mais importantes, porque é imprescindível dominar bem o uso de tabelas para criar um bom layout html. Praticamente todas as páginas web utilizam recursos de tabela para diagramar seus elementos. Porém a utilização de estilos (CSS) para posicionamento de elementos na página está crescendo cada vez mais, e já existem páginas com layout muito bom sem o uso de tabelas, usando apenas CSS TABELA SIMPLES Como padrão uma tabela não possui bordas. Cada linha da tabela é definida separadamente e é possível modificar a aparência da tabela, utilizando alguns atributos que veremos mais adiante. O número de TR define o número de linhas na tabela e o número de TD (dentro da TAG TR) define o número de colunas da tabela. Sintaxe: <table> <tr> <th> cabeçalho da tabela</th> <td> dados da tabela</td> </tr> </table> 31

32 Onde: <table></table>: TAGs de início e fim de tabela. <tr></tr>: define cada linha da tabela; <th></th>: define o cabeçalho da tabela. É uma célula da tabela; <td></td>: define os dados da tabela. É uma célula na tabela; Dados da Tabela: podem ser texto, imagens e links; Cabeçalhos da Tabela: cabeçalhos com texto, imagens ou links MODIFICANDO A APARÊNCIA DA TABELA É possível definir alguns atributos para tabelas, como bordas, alinhamento do conteúdo, espaçamento entre as células, espaçamento entre os dados e a próxima célula, largura da tabela, etc. Sintaxe: Vejamos alguns desses atributos: <table border= n width= n% height= n% cellspacing= n cellpading= n bgcolor= #rrggbb > </table> Onde: BORDER= n : espessura da borda em pixels. WIDTH= n% : largura da tabela em relação ao browser, em pixels ou %; HEIGHT= n% : altura da tabela em relação ao browser, em pixels ou %; CELLSPACING= n : espaço entre uma célula e outra, em pixels; CELLADDING= n : espaço entre os dados e a borda da tabela, em pixels; BGCOLOR= #RRGGBB : cor de fundo das células da tabela. 32

33 9.3. ATRIBUTOS DE LINHAS E CÉLULAS Também é possível definir algumas propriedades de linhas e células individuais da tabela. Sintaxe: <tr align= posição bgcolor= #rrggbb valign= posição > <td align= posição valign= posição bgcolor= #rrggbb width= n% nowrap></td> </tr> Onde: ALIGN= posição : alinhamento horizontal do conteúdo da célula ou das células da linha. Pode ser left, right e center; BGCOLOR= #RRGGBB : define a cor de fundo das células da linha ou de uma célula individual; VALIGN= posição : alinhamento vertical de uma célula ou de células de uma linha; WIDTH= n% : largura de uma célula em pixels ou %; NOWRAP: indica ao browser que o texto da célula não pode ser dividido em mais de uma linha. A coluna inteirar terá o tamanho do texto escrito naquela célula; 9.4. MESCLANDO CÉLULAS 33

34 É possível através de atributos na tag TD mesclar células em uma mesma linha ou em uma mesma coluna. Para mesclar células em uma mesma linha usar o atributo COLSPAN na tag TD e para mesclar células em uma mesma coluna usar o atributo ROWSPAN na tag TD. Sintaxe: <td colspan= n >dados da tabela</td> <td rowspan= n >dados da tabela</td> Onde: COLSPAN= n : é o número de colunas que a célula ocupará; ROWSPAN= n : é o número de linhas que a célula ocupará; 34

35 10. FRAMES Os frames são divisões da tela do browser em diversas telas (ou quadros ). Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte, processados no servidor e devolvidos ao usuário. O corpo de uma página Frame é diferente de uma página comum, e nesse arquivo só tem as dimensões das divisões e as páginas que iram aparecer em cada divisão. A estrutura básica do corpo de uma página com frame: <html> <head> <title>titulo da página</title> </head> <frameset cols="15%,85%"> <frame src="pagina1.html"> <frame src="pagina2.html"> </frameset> </html> CRIANDO FRAMES Para utilizar o recurso de frames, é preciso utilizar um conjunto de tags. Cada uma com sua função: 35

36 <FRAMESET> é utilizada para criar um conjunto de frames e seus elementos. É a tag principal para a criação de frames e precisa ser encerrada com </FRAMESET>; <FRAME> é utilizada para definir um frame (quadro) dentro de um conjunto de frames. Não necessita de tag de encerramento; Sintaxe: <frameset cols= COLUNAS,LARGURA rows= LINHAS,ALTURA frameborder= 1/0 framespacing= N border= N > <frame name= NOME src= url align= POSIÇÃO marginheight= ALTURA marginwidth= LARGURA scrolling= YES/NO noresize> </frameset> Onde: FRAMESET: tag de abertura de um conjunto de frames; COLS= colunas,largura : ROWS= linhas,altura : FRAMEBORDER= 1/0 : o valor 1 exibe uma borda 3D no frame, o valor 0 não exibe a borda; BORDER= n : define o tamanho da borda; FRAMESPACING= n : define um espaço em pixels entre os frames, nem todos os browsers reconhecem este atributo; FRAME: define cada quadro (frame) separadamente; NAME= nome : define o nome do frame; 36

37 SRC= URL : define a página que será exibida no frame; ALIGN= posição : define o alinhamento do conteúdo do frame. Posição pode ser: TOP: o conteúdo é alinhado no topo do frame; MIDDLE: o conteúdo é alinhado nomeio do frame; BOTTOM: o conteúdo é alinhado na base do frame; LEFT: o conteúdo é alinhado à esquerda do frame; RIGHT: o conteúdo é alinhado à direita do frame; MARGINHEIGHT= altura : define a altura da margem em pixels; MARGINWIDTH= largura : define a largura da margem em pixels; SCROLLING= yes/no/auto : define se o frame terá ou não barra de rolagem; NORESIZE: evita o redimensionamento do frame; 37

38 11. REFERÊNCIAS HTML Dinâmico. Ramalho, José Antônio Alves. Berkeley Brasil, A Arte Web. Site Sobre HTML, HTML Dinâmico e Design. ( Tutorial HTML. Tutorial mantido pela USP desde ( 38