apostila html unip mdulo 1

Download Apostila HTML UNIP Mdulo 1

Post on 05-Jul-2015

86 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

Mdulo 1Formatao de TextosNeste captulo, vamos trabalhar com as tags de formatao de textos. Aprenderemos as vrias formas de trabalhar com a esttica da pgina, estilos, pr-formatao de textos e letreiros com movimentos. Se quisermos desenvolver uma pgina com recursos do HTML 4, provvel que no utilizemos as tags normais de formatao, j que essa a funo das folhas de estilo que aprenderemos a criar mais tarde. Existem dois tipos de formatao no HTML: Lgico e fsico. Os efeitos de apresentao na tela so os mesmos: o motivo para a diferenciao entre eles se deve idia bsica da independncia entre especificao e apresentao. A formatao lgica acompanha o significado lgico do texto marcado: um endereo de email, uma citao, etc. Sua apresentao final varia conforme o browser, podendo nos oferecer resultados mais ricos e diversos. A formatao fsica especifica explicitamente o estilo que se quer para o texto: itlico, grifado, etc. A apresentao final deste no sofre grandes variaes. A maioria os desenvolvedores evita a utilizao de formataes lgicas em suas pginas por no ser capaz de manter o controle total sobre elas. Imagine-se projetando por horas um design maravilhoso para seu site e quando voc o coloca no ar, percebe que os seus clientes vem toda aquela formatao de maneira totalmente diferente. Dica: Quando vejamos as CSS (Cascading Style Sheets), ou Folhas de Estilo, prefiraas ao invs das tags de formatao.

Ttulo do Texto (Cabealhos)Os ttulos so definidos pelas tags em que n pode valer n = 1, 2,..., 6. os nmeros de 1 a 6 apresentados nesta tag representam a prioridade do titulo em que, quanto maior o nmero, menor a prioridade ou, para sermos didticos, menos o tamanho. Sintaxe: ttulo

Exemplo:

Cujo resultado ser o da figura abaixo:

Cabe destacar algo, que, se no foi visto ainda, um captulo e observao parte sobre acentuao no HTML. No recomendvel que os documentos Web tenham acentos. Ainda que todos os navegadores existentes entendam a presena de um caractere acentuado, existem ocasies em que o texto em HTML pode ficar truncado. Por exemplo, quando algum copia uma pgina web e a envia para outra pessoa por meio de correio eletrnico. Para contornar esse problema, existe uma tabela de cdigos que substituem os acentos. Os navegadores transformam esses cdigos em caracteres acentuados e o documento pode ser transmitido por qualquer meio.

Sugesto: O documento pode ser escrito com os acentos e, antes de ir para o servidor web, pode ser submetido a uma macro de processador de texto (por exemplo, do Word) para substitu-los pelo cdigo correspondente em HTML Veja a tabela de cdigos de acentos: Tabela de acentos:Abaixo est uma lista dos caracteres especiais da tabela ISO 8859 Latin-1. O uso destes caracteres necessrio para que uma pgina HTML seja exibida corretamente em qualquer computador do mundo. & < > " / / & < > "

Alterao de FontePara alterarmos os atributos da fonte de um texto da home-page, utilizamos a tag .

Sintaxe: Texto Atributos: SIZE Define o tamanho da fonte utilizando um tamanho absoluto ou relativo. O valorpara o tamanho absoluto varia entre 1 e 7(quanto maior o nmero, maior a fonte) e o relativo varia entre -4 e 4 (negativos so valores para fontes menores que o valor padro do navegador e positivos, so maiores).

Obs.: Navegadores diferentes tm tamanhos default (padro) do texto diferentes Alm disso, o prprio usurio pode alterar o valor default do eu browser nas configuraes do prprio browser. FACE Define o tipo de texto. FACE o nome da fonte que a tag vai representar.Voc pode definir mais de uma fonte para o mesmo texto. As fontes devem ser separadas por vrgula e o browser procura na ordem qual delas ele possui no computador do cliente para representar.

Obs.: Escolha fontes comuns que existam em quase todos os computadores e sempre oferea mais de uma opo de fonte. Lembre-se de que se escolher uma que no existe no computador do usurio, ser apresentada a fontepadro. COLOR Define a cor da fonte do texto. Essa cor pode ser definida por seu nome em ingls (blue, red, yellow e assim por diante) ou por seu cdigo hexadecimal em RGB, precedido pela cerquilha (ou seja, o smbolo #).

Como funciona a paleta de cores do Navegador

Os browsers adotaram o padro de cores RGB (Red,Green, Blue) para trabalhar com as cores em uma pgina web. Todos os monitores coloridos usam esse padro, ao contrrio das impressoras, que usam o formato CMYK. Os valores so distribudos com dois caracteres para cada cor, na mesma ordem apresentada acima. Ela pode variar entre 00 e FF para cada uma, totalizando 256 tons de cores para podermos misturar. Quanto maior o valor que atribuirmos, mais clara ficar a cor. Exemplos: #FF0000 Vermelho-puro #00FF00 Verde-puro #FFCCCC Vermelho bem claro. Observar que para clarear o vermelho-puro, os valores de verde e de azul foram aumentados. #FFFFFF Branco

Mais informaes sobre cores podem ser vistas no arquivo paleta de cores.doc que podem baixar e imprimir.

Pr-FormataoA marcao (abreviao de preformatted) delimita uma rea de texto em que espaos, novas linhas e tabulaes so mantidos. Ou seja, o texto vai ser apresentado da mesma e exata forma como foi digitado, mesmo que no haja marcaes do HTML. uma forma de preservar o formato de um texto. As tags HTML continuam valendo dentro da tag . Esse recurso excelente para exemplos de cdigo e extratos bancrios. Exemplo:

Cujo resultado ser:

Formataes Lgicas Para ttulos de livros, filmes e citaes curtas. Para indicar trechos de cdigos de programas. Indica definio de uma palavra; em gral apresenta o texto em itlico. nfase, tambm apresentado normalmente em itlico. Indica uma entrada via teclado.

Indica um exemplo. Forte nfase, mostrado normalmente em negrito. Indica varivel ou valores que o usurio deve escrever, geralmente mostrado em itlico. Assinatura da pgina, ele quebra a linha e apresenta-se em itlico.

Estilos Fsicos ou Negrito (em alguns browsers, pode aparecer sublinhado). Itlico (em alguns browsers, caracteres apensa inclinados). Tipo teletype fonte de espaamento fixo. Sublinhado; deve ser usado com cuidado, pois pode ser confundida com a apresentao de links. Frase riscada Fonte um pouco maior Fonte um pouco menor Subscrito, o texto fica um pouco abaixo da linha normal e um pouco menor. Sobrescrito, o texto fica um pouco acima da linha normal e um pouco menor.Letreiros Animados (Marquees) possvel obter o efeito animado de texto por meio da tag . Com essa tag, o texto pode se mover de um lado para outro da sua pgina, como se escorregasse por ela.Sintaxe: {Letreiro} O maior problema desse efeito que ele s visto por alguns browsers.Atributos BEHAVIOR Define como o letreiro vai deslizar na tela. Podem ser atribudos trsvalores: SCROLL o letreiro continua rodando continuamente em um mesmo sentido. SLIDE O letreiro parte de um ponto da tela, vai at o outro e pra, quando chegar ao final de seu percurso. ALTERNATE Ele desliza at o outro lado da tela, mas quando chega l, o letreiro volta pela tela novamente, indo e voltando.DIRECTION Define a posio em que o texto vai deslizar, podendo ser left, right outop (de baixo para cima) ou finalmente bottom (de cima para baixo).Funciona esse atributo, com top e bottom apenas em algumas verses do Internet Explorer.LOOP Determina quantas vezes o texto deslizar pela tela. Caso queira deslizarinfinitamente o letreiro pela tela, utilize o valor infinite ou simplesmente no insira o atributo LOOP.HEIGHT e WIDTH Definem, respectivamente, a largura e a altura da tela. Seus valores podem ser apresentados de duas formas: pelo nmero de pixels, ou pela porcentagem de visualizao na tela. HSPACE e VSPACE Determinam o espao em pixels que deve ficar livre em torno do letreiro. HSPACE representa o espao horizontal (aos lados) e VSPACE, o espao vertical (acima e abaixo). BGCOLOR Define a cor de fundo da rea do letreiro. SCROLLAMOUNT e SCROLLDELAY Podemos, com esses dois atributos,controlar a velocidade do letreiro. O SCROLLDELAY define o tempo, em milissegundos, que o letreiro vai demorar em cada um dos quadros, e o SCROLLAMOUNT define a quantidade de pixels que ele vai percorrer em cada quadro.Exemplo:Pargrafos e ListasPargrafoA tag serve para indicar o incio de um novo pargrafo. Com ela, voc pode definir onde inicia e onde termina cada pargrafo de sua pgina. Se a tag for colocada antes de um ttulo (, por exemplo), a marca de pargrafo ignorada. Nesse caso o prprio ttulo se encarrega de colocar o espao necessrio.Sintaxe: texto Dica: muito importante que voc delimite os pargrafos de sua pgina em vez desepar-los por tags
. Primeiro, porque fica fcil controlar a organizao de suas pginas e segundo porque se voc estiver interessado em utilizar algumas funes do DHTML, precisar de tags contineres (aquelas que possuem abertura e fechamento).Bloco de TextoA tag determina um pargrafo recuado tanto do lado esquerdo quanto do lado direito.Esse recuo utilizado normalmente para indicar citaes ou comentrios, bem como trechos de destaque. Exemplo:E o resultado ser:Diviso de TextoAs divises de texto definem onde o texto deve se dividir e podem tambm definir o alinhamento de um pargrafo ou bloco de texto. A tag tambm utilizada como diviso de camadas em DHMTL. Sintaxe: [texto] ListasAs listas so formataes muito utilizadas em paginas web, pois uma forma clara de distino de dados. Alm de ser extremamente atraente, uma lista bem-formatada de fcil pesquisa tambm. As listas podem ser divididas em trs tipos: Lista de definio Lista no-ordenada Lista ordenada As listas mais comuns so as ordenadas e no-ordenadas, por apresentarem smbolos em seus itens. Esses smbolos enriquecem a esttica da pgina. Essas listas po