Apostila_HTML_CSS_E-Jovem 11
Pré-visualização17 páginas
ao desejado. Observe abaixo o código e, logo em seguida, como ficou: 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: 1.7. Fonte <FONT></FONT> Até agora, construímos uma página relativamente simples. Percebemos então que o texto todo ficou de uma cor só até o momento. Mas será que a página só poderá ficar assim? Não poderíamos codificar o tipo de fonte, nem o tamanho, muito menos a cor? Claro que isso é possível! E é 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: Projeto eJovem Módulo II: HTML 17 Onde: 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 citadas acima: Veremos um pouco sobre cada um dos atributos, começando pelo tamanho. A TAG acima produzirá a palavra \u201cTexto\u201d 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 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 existem e faça o texto também. As cores são introduzidas também através do elemento <FONT> quando queremos que alguma parte do texto fique diferente da forma padrão, ou da que foi definida na TAG <BODY>. Usase 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: Projeto eJovem Módulo II: HTML 18 Perceba, como foi dito anteriormente, que tanto faz colocar em letras maiúsculas ou minúsculas, pois o navegador vai interpretar corretamente. 1.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 quisermos colocar, por exemplo, uma palavra em negrito e sublinhado, como o título? Sim, isso é possível, por isso vamos estudar os estilos. 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 ou não funcionar corretamente: HTML oferece outras TAGs para formatação: Outras TAGs de Formatação <PRE> Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações <BLOCKQUOTE> É usado para citações longas <ADDRESS> Usado para formatar endereços de EMail e referências a autores de documentos, como por exemplo: <CODE>. Utilizada para relacionar o códigofonte 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. 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: Projeto eJovem Módulo II: HTML 19 \u2022 É permitido utilizar links e âncoras. Entretanto, não existe certeza de como o browser interpretará essas marcações. \u2022 A TAG <P> não deve ser utilizado. \u2022 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: O resultado seria: Projeto eJovem Módulo II: HTML 20 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 pessoais: o que gosta (Tipo de música, por exemplo). Chamea de \u201cmeus_dados.html\u201d. 1.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 linhas (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 à esquerda (align=left), que já é padrão e também à direita (align=right). Exercício 6: Pegue a página\u201cmeus_dados.html\u201de implemente com estes conhecimentos de parágrafos. Salve a página, antes de modificar, como \u201cmeus_dados_modificados.html\u201d Projeto eJovem Módulo II: HTML 21 1.10. Quebra de linha <BR> Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos 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. 1.11. Linhas horizontais <HR> A TAG <HR> insere uma linha horizontal que tem diversos atributos, oferecendo resultados diversos. Exercício 7: Para exercitar, através do \u201cmeus_dados_modificados.html\u201d, implemente as linhas horizontais da melhor forma possível. 1.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 \u201cmãozinha\u201d e, ao clicar \u201cchamamos\u201d (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: \u2022 arquivo_destino \u2192 é o endereço do documento de destino, da página ou imagem que queremos abrir. \u2022 âncora \u2192 é o texto ou imagem que servirá de