Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-periodo-unopar

Embed Size (px)

DESCRIPTION

Trabalho individual 1º Semestre - Análise e Desenvolvimento de Sistemas - UNOPAR

Text of Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-periodo-unopar

// O body o corpo da pgina. Tudo que for colocando entreas tags de abertura e fechamento aparecer em sua pgina.O elemento body delimita o contedo do documento.8 10. Atravs de atributos de , podemos definir cores para ostextos, links e para o fundo de pginas, bem como uma imagem de fundo (marcadgua):Onde:BGCOLOR: Background Color, ou seja, cor do fundo da pgina.Quando no indicada a cor de fundo, o browser (pgina de navegao) ir mostraruma cor padro, geralmente cinza ou preto.LINK: Cor dos links (padro: azul).ALINK: Cor dos links quando acionados, clicados (padro:vermelho).VLINK: Cor dos links depois de visitados (padro: azul escuro ouroxo).Seus valores so dados em hexadecimal, equivalentes a cores nopadro RBG (Red, Green, Blue). Existem tabelas de cores com esses valores, masgrande parte dos editores j oferece uma interface bem amigvel atravs da qualescolhemos as cores desejadas, sem nos preocuparmos com nmeros esdrxulostais como #FF80A0.Browsers que seguem a definio de HTML 3.2 em diante, tambmaceitam 16 nomes de cores, tirados da paleta VGA do Windows por exemplo,podemos escrever BGCOLOR=BLUE. Porm, browsers mais antigos noapresentaro as cores inidicadas.BACKGROUND: Indica o URL (O sistema de endereamento daWeb baseado em uma sintaxe chamada URI (Universal Resource Identifier Identificador Universal de Recursos). Os endereos que utilizamos atualmente soos URLs, que seguem essa sintaxe. URL significa Uniform Resource Locator Localizador Uniforme de Recursos. Um exemplo de URL : http://www.unopar.bresse endereo identifica: o protocolo de acesso ao recurso desejado (http) e amquina a ser acessada (www.unopar.br).// Fechamento da tag do corpo;// Fechamento da pgina em HTML.Fazendo um teste: Para ver como nas pginas da internet temHTML, faa o seguinte acesse um site qualquer no seu computador.9 11. Aperte CTRL+U dependendo do seu navegador ir abrir uma novatela com o cdigo fonte da pgina exibindo os elementos bsicos do HTML.Figura 2 - Tela do Site G1 em HTMLFigura 3 - Estrutura de um Documento HTML3.2.1 Cores e FontesCores As cores so introduzidas atravs do elemento ,usando o sistema RGB para cores (da mesma forma que para cores dedocumentos). Texto Produzir na pgina: a palavra Texto escrita na cor vermelha.Assim, um trecho de texto pode ter uma cor diferente da definiogeral de cores, feita atravs dos atributos de .10 12. Tamanho Este comando permite que o autor do documento altere o tamanho dasletras em trechos especficos de texto. O tamanho bsico dos textos 3 (padro).Podemos indicar tamanhos relativos a esse: Texto Produzir na pgina: a palavra Texto com o tamanho 3.Letra maior Letra normal Letra menor Letra Maior Letra Normal Letra MenorFontes Uma evoluo que permite a escolha da fonte para ostextos, o atributo FACE: Texto Produzir a palavra Texto com a fonte (tipo de letra) Arial. Fonte Verdana AzulFonte Verdana Azul3.2.2 CabealhoH seis nveis de cabealhos em HTML, de a . Este um cabealho de nvel 1 Este um cabealho de nvel 2 Este um cabealho de nvel 3 Este um cabealho de nvel 4 Este um cabealho de nvel 5 Este um cabealho de nvel 6 Estes cabealhos so mostrados no browser da seguinte forma:Este um cabealho de nvel 1.Este um cabealho de nvel 2.Este um cabealho de nvel 3.Este um cabealho de nvel 4.11 13. Este um cabealho de nvel 5.Este um cabealho de nvel 6.Aninhamento de Cabealhos Os cabealhos no podem seraninhados, isto , a formatao:Este um cabealho de nvel 1dentro de umcabealho de nvel 2Pode produzir algum resultado prximo ao desejado:Este Um cabealho de nvel 1dentro de um cabealho de nvel 2Mas o mais comum que os browsers entendam essa formataocomo sendo:Este um cabealho de nvel 1dentro de umcabealho de nvel 2Ou seja, como se tivesse faltando uma etiqueta de fechamento de antes de e faltando uma abertura de depois do fechamento de, oferecendo o seguinte resultado:Este Um cabealho de nvel 1Dentro de um cabealho de nvel 2Os editores WYSIWYG naturalmente no permitem o aninhamentode cabealhos.Alinhamento de cabealhos os cabealhos tem atributos dealinhamento:Cabealho centralizadoCabealho centralizado Cabealho alinhado direitaCabealho alinhado direitaCabealho alinhado esquerda(default=padro)Cabealho alinhado esquerda (default=padro)12 14. 3.2.3 SeparadoresAs quebras de linha do texto fonte no so significativas naapresentao de documentos em HTML. Para organizar os textos, precisamos deseparadores:Quebra de Linha Quando queremos mudar de linha, usamos oelemento
. Isso s necessrio quando queremos uma quebra de linha emdeterminado ponto, pois os browsers j quebram as linhas automaticamente paraapresentar os textos.Com sucessivos
, podemos inserir diversas linhas em branconos documentos. Esse elemento tem um atributo especial que ser mostradoposteriormente na insero de imagens.Pargrafos Para separar blocos de texto, usamos o elemento

, por exemplo:Pargrafo 1;

Pargrafo 2.Que produz o seguinte:Pargrafo1;Pargrafo2.Combinando pargrafos e quebras de linha, temos:Pargrafo 1;
linha 1 do pargrafo 1,
linha 2 do pargrafo 1.

Pargrafo 2;
linha 1 do pargrafo 2,
linha 2 do pargrafo 2.O resultado da marcao acima :Pargrafo1;linha 1 do pargrafo 1,linha 2 do pargrafo 1.Pargrafo 2;linha 1 do pargrafo 2,linha 2 do pargrafo 2.

tem como atributo de alinhamento, semelhante aos cabealhos,como nos exemplos a seguir:

Assim como os trens, as boas ideias s vezeschegam com atraso.
(Giovani Guareschi)

13 15. Assim como os trens, as boas ideias s vezes chegam com atraso.(Giovani Guareschi)14

Como diz o provrbio chins: melhor passarpor ignorante uma vez do que permanecer ignorante para sempre.

Como diz o provrbio chins: melhor passar por ignoranteuma vez do que permanecer ignorante para sempre.

Este o alinhamento padro (default), e por issono vou colocar nenhuma frase especial.

Este um alinhamento padro (default), por isso no vou colocar nenhumafrase especial.Linha Horizontal insere uma linha horizontal, como a apresentada abaixo:Essa linha tem diversos atributos, oferecendo resultados diversos. insere uma linha de largura 7 (pixels). insere uma linha que ocupa 50% do espaohorizontal disponvel: insere uma linha decomprimento 30% (do espao horizontal disponvel), alinhada direita, sem efeitotridimensional: insere uma linha de largura70 (pixels), comprimento 2 (pixels), alinhada esquerda (o Netscape,aparentemente, no aceita esta formatao de ): 16. 15Divises outros elementos usados para separar pores de textoso o

e o
.
centraliza os elementos (textos, imagens,tabelas) que estiverem dentro de sua marcao.
marca uma diviso lgica deum documento e uma formatao bastante usada atualmente.3.3 LISTAS EM HTMLH vrios tipos de listas em HTML, sendo estas as mais usadas ecorretamente apresentadas pelos browsers:Lista de Definio Estas listas so chamadas tambm Listas deGlossrio, uma vez que tem o seguinte formato:termo a ser definidodefiniotermo a ser definidodefinioQue produz:termo a ser definidodefiniotermo a ser definidodefinioEste tipo de lista muito utilizado para diversos efeitos deorganizao de pginas, por permitir a tubulao do texto. Um exemplo a listacomposta abaixo:Imperadores do Brasil:D. Pedro INome completo: Pedro de Alcntara Francisco AntnioJoo Carlos Xavier de Paula Miguel Rafael Joaquim JosGonzaga Pascoal Cipriano Serafim de Bragana e Bourbon 17. D.Pedro IINome completo: Pedro de Alcntara Joo CarlosLeopoldo Salvador Bibiano Francisco Xavier de PaulaLeocdio Miguel Gabriel Rafael GonzagaImperadores do Brasil:D.Pedro INome completo: Pedro de Alcntara Francisco Antnio JooXavier de Paula Miguel Rafael Joaquim Jos Gonzaga PascoalCipriano Serafim de Bragana e BourbonD. Pedro IINome completo: Pedro de Alcntara Joo Carlos LeopoldoSalvador Bibiano Francisco Xavier de Paula Leocdio MiguelGabriel Rafael GonzagaListas No-numeradas So equivalentes s listas commarcadores do MS-Word, por exemplo:
  • item de uma lista
  • item de uma lista, que pode ser to grande quanto se queira,sem que seja necessrio se preocupar com a formatao das margens de texto
  • item
Item de uma lista Item de uma lista, que pode ser to grande quanto se queira,sem que seja necessrio se preocupar com a formatao dasmargens de texto itemA diferena entre o resultado da marcao HTML e do Word est namudana dos marcadores, assinalando os diversos nveis de listas compostas:16 18.
  • Documentos bsicos
  • Documentos avanados
      • GGI
      • contadores
      • relgios
    • Detalhes sobre imagens
    Documentos bsicos Documentos avanadoso Formulrios CGIo contadoreso relgios Detalhes sobre imagensListas Numeradas
    1. item de uma lista numerada
    2. item de uma lista numerada, que pode ser to grande quandose queira, sem que seja necessrio se preocupar com a formatao das margens detexto
    1. item de uma lista numerada17 19. 2. item de uma lista numerada, que pode ser to grandequanto se queira, sem que seja necessrio se preocuparcom a formatao das margens de texto3. item de lista numeradaEstas listas no apresentam em formato 1.1, 1.2, etc., quandocompostas apresentam-se da seguinte forma:1. Documentos bsicos2. Documentos avanados1. Formulrios1. CGI2. Contadores3. Relgios2. Detalhes sobre imagensPorm, atravs do atributo TYPE, pode-se lidar com a numerao deitem:
    1. Documentos bsicos
    2. Documentos avanados
      1. formulrios
        1. GGI
      2. contagens
      3. relgios
    3. Detalhes sobre imagens
    A. Documentos bsicosB. Documentos avanadosa. Formulriosi.CGIb. contadoresc. relgios18 20. C. Detalhes sobre imagensAinda seguindo HTML, o atributo START pode indicar o inicio danumerao da lista:
    1. um item
    2. outro item
    3. mais um item
    D. Um itemE. Outro itemF. mais um itemLista e sub-listas As listas podem ser aninhadas.termo a ser definidodefinio