Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Aula 03 HTML Textos

    Enviado por

    Rafael Gleriani
    6 visualizações11 páginas
     Cabeçalhos para títulos e sub-títulos, parágrafos e quebras de linhas no HTML  Caracteres especiais representados por seqüências de escape  Comentários e linhas horizontais para organização do conteúdo

    Descrição original:

    Título original

    aula_03_html_textos

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
     Cabeçalhos para títulos e sub-títulos, parágrafos e quebras de linhas no HTML  Caracteres especiais representados por seqüências de escape  Comentários e linhas horizontais para organização do conteúdo

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    6 visualizações11 páginas

    Aula 03 HTML Textos

    Enviado por

    Rafael Gleriani
     Cabeçalhos para títulos e sub-títulos, parágrafos e quebras de linhas no HTML  Caracteres especiais representados por seqüências de escape  Comentários e linhas horizontais para organização do conteúdo

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 11

    HTML: TEXTOS

    CURSO TÉCNICO DE INFORMÁTICA


    MODALIDADE SUBSEQÜENTE
    DESENVOLVIMENTO WEB I
    PROF. ALEXANDRO DOS SANTOS SILVA

    SUMÁRIO
    Cabeçalhos para títulos e sub-títulos
    Parágrafos
     Quebras de linhas
     Blocos de textos
     Caracteres especiais
     Comentários
     Linhas Horizontais

    2
    CABEÇALHOS PARA TÍTULOS E
    SUB-TÍTULOS
     Normalmente são usados para títulos e sub-títulos de
    um texto da página
     Níveis de cabeçalhos: numerados de 1 a 6
     Tags:
     <H1>
     <H2>
     <H3>
     <H4>
     <H5>
     <H6>
     Quanto menor o nível, maior será o destaque
     Em geral, os cabeçalhos são exibidos em letras maiores
    e em negrito; uma linha em branca é adicionada antes
    e depois do cabeçalhos
     Sintaxe:
    <Hy>Texto do Cabeçalho</Hy>
    Onde o y é um número que poderá ser especificado
    entre 1 e 6, definindo o nível do cabeçalho
    3

    CABEÇALHOS PARA TÍTULOS E


    SUB-TÍTULOS
     Exemplo 01: 6 títulos/sub-títulos com 6 níveis de
    cabeçalho distintos

    <html>
    <head>
    <meta content="text/html; charset=utf-8">
    <title>Exemplo 01</title>
    </head>
    <body>
    <h1>Título 1</h1>
    <h2>Título 2</h2>
    <h3>Título 3</h3>
    <h4>Título 4</h4>
    <h5>Título 5</h5>
    <h6>Título 6</h6>
    </body>
    </html>
    4
    CABEÇALHOS PARA TÍTULOS E
    SUB-TÍTULOS
     Exemplo 01: 6 títulos/sub-títulos com 6 níveis de
    cabeçalho distintos

    CABEÇALHOS PARA TÍTULOS E


    SUB-TÍTULOS
     Possibilidade de alinhamento de cabeçalhos
     Atributo align

     Valores admitidos para este atributo


     LEFT : título/subtítulo alinhado à esquerda (alinhamento padrão)
     CENTER: título/subtítulo alinhado ao centro
     RIGHT: título/subtítulo alinhado à direita
     JUSTIFY : título/subtítulo justificado

     Exemplo 02
    <html>
    <head>
    <meta content="text/html; charset=utf-8">
    <title>Exemplo 02</title>
    </head>
    <body>
    <h1 align="left">Título alinhado à esquerda</h1>
    <h2 align="center">Título alinhado de forma centralizada</h2>
    <h3 align="right">Título alinhada à direita</h3>
    <h4 align="justify">Título alinhada de forma justificada</h4>
    </body>
    </html>
    6
    CABEÇALHOS PARA TÍTULOS E
    SUB-TÍTULOS
     Exemplo 02: uso de alinhamentos em cabeçalhos

    PARÁGRAFOS
     Tag: <p>
     Demarcação de início de um parágrafo, com a criação de
    uma linha em branco entre cada parágrafo
     Atributo para alinhamento dos parágrafos: align
     LEFT : parágrafo alinhado à esquerda (alinhamento padrão)
     CENTER: parágrafo alinhado ao centro
     RIGHT: parágrafo alinhado à direita
     JUSTIFY : parágrafo justificado
     Exemplo 03
    <html>
    <head>
    <meta content="text/html; charset=utf-8">
    <title>Exemplo 03</title>
    </head>
    <body>
    <p align="left">Parágrafo alinhado à esquerda</p>
    <p align="center">Parágrafo alinhado ao centro</p>
    <p align="justify">Parágrafo justificado</p>
    <p align="right">Parágrafo alinhada à direita</p>
    </body>
    </html>
    8
    PARÁGRAFOS
     Exemplo 03: uso de alinhamentos em parágrafos

    PARÁGRAFOS
     Quebras de linhas no interior de um parágrafo são
    substituídas por espaços em branco, quando da visualização
    da página no navegador
     Espaços em branco após a tag de abertura ou antes da tag de
    fechamento de parágrafo são igualmente ignorados
     Exemplo 04
    <html>
    <head>
    <meta content="text/html; charset=utf-8">
    <title>Exemplo 04</title>
    </head>
    <body>
    <p>Texto 1
    Texto 2</p>
    </body>
    </html>

    10
    QUEBRAS DE LINHAS
     Tag: <br/>
     Usada para indicar uma quebra de linha no interior de um
    parágrafo
     A quebra de linha ocorrerá sem a necessidade de se iniciar um
    novo parágrafo
     Nenhum acréscimo de espaço extra entre as linhas, como ocorre
    entre os parágrafos
     Exemplo 05
    <html>
    <head>
    <meta content="text/html; charset=utf-8">
    <title>Exemplo 05</title>
    </head>
    <body>
    <p align="center">Um primeiro parágrafo
    sem quebra de linha</p>
    <p align="center">Um segundo parágrafo<br/>com quebra de
    linha</p>
    </body>
    </html>
    11

    QUEBRAS DE LINHAS
     Exemplo 05: quebras de linhas no interior de um
    parágrafo

    12
    BLOCOS DE TEXTOS
     Tag: <pre>
     Usado com propósito semelhante ao da tag de parágrafo,
    com a diferença de que a formatação usada durante a
    digitação do texto existente no interior da tag é mantida
    pelo navegador, quando da visualização
     Quebras de linhas e tabulação não serão ignoradas, se existentes
    no interior da tag <pre>
     Exemplo 06: substituição da tag <p> (vide exemplo 04) pela
    tag <pre>
    <html>
    <head>
    <meta content="text/html; charset=utf-8">
    <title>Exemplo 06</title>
    </head>
    <body>
    <pre>Texto 1
    Texto 2</pre>
    </body>
    </html>

    13

    CARACTERES ESPECIAIS
     Representação de caracteres especiais por seqüências de escape
     Mecanismo que garante que estes caracteres especiais sejam visualizados
    corretamente em qualquer navegador, independentemente do padrão de
    caracteres adotado
     Seqüência de escape: composição
     Símbolo inicial: “&”
     Número ou cadeia de caracteres correspondente ao caractere desejado
     Símbolo final: “;”
     Exemplo
    <html>
    <head>
    <meta content="text/html; charset=utf-8" />
    <title>Caracteres Especiais</title>
    </head>
    <body>
    Caracteres com uso especial em HTML: &lt;, &gt; e &amp;
    </body>
    </html>

    14
    CARACTERES ESPECIAIS
     Caracteres de acentuação da língua portuguesa
    á &aacute; Á &Aacute;
    ã &atilde; Ã &Atilde;
    â &acirc; Â &Acirc;
    à &agrave; À &Agrave;
    é &eacute É &Eacute;
    ê &ecirc; Ê &Ecirc;
    í &eacute; Í &Iacute;
    ó &oacute; Ó &Oacute;
    õ &otilde; Õ &Otilde;
    ô &ocirc; Ô &Ocirc;
    ú &uacute; Ú &Uacute;
    ü &uuml; Ü &Uuml;
    ç &ccedil; Ç &Ccedil;
    15

    CARACTERES ESPECIAIS
     Alguns símbolos de pontuação
    Espaço &nbsp;
    & & comercial &amp;
    > Maior que &gt;
    < Menor que &lt;
    ^ Acento circunflexo &circ;
    ~ Acento til &tilde;
    ¨ Acento trema &uml;
    ´ Acento agudo &cute;
    ¸ Cedilha &cedil;
    " Aspas duplas &quot;
    º Ordinal masculino &ordm;
    ª Ordinal feminino &ordf;
    • Marcador (bullet) &bull;

     A relação completa de caracteres especiais se encontra disponível


    no endereço http://www.w3.org/TR/html4/sgml/entities.html

    16
    COMENTÁRIOS
     Conceituação: conteúdo interpretado como uma anotação
     Este tipo de conteúdo não é apresentado graficamente na página, quando
    de sua visualização no navegador
     Sintaxe
    <!–- Comentário de Página -->
     Comentários podem usar mais de um linha
     Exemplo
    <!–- Primeira Linha de Comentário
    Segunda Linha de Comentário
    -->
     Exemplo 07
    <html>
    <head>
    <meta content="text/html; charset=utf-8">
    <title>Exemplo 07</title>
    </head>
    <body>
    <!-- Um exemplo de comentário -->
    <h3>Esta página contém um comentário que não é apresentado pelo
    navegador</h3>
    </body>
    </html>

    17

    COMENTÁRIOS
     Exemplo 07: uso de comentários

    18
    LINHAS HORIZONTAIS
     Tag: <hr>
     Sintaxe:
    <HR width="n%" align="posição" size="n"
    color="#cor" noshade />
     Atributos
     WIDTH: largura da linha, em formato absoluto (pixels) ou percentual
    da largura útil da página
     ALIGN: alinhamento da linha (LEFT, RIGHT ou CENTER)
     SIZE: espessura da linha (em pixels)
     COLOR: cor da linha
     NOSHADE: se informado esse atributo, a linha não estará
    sombreada (por padrão, a linha é sombreada)

    19

    LINHAS HORIZONTAIS
     Exemplo 08
    <html>
    <head>
    <meta content="text/html; charset=utf-8">
    <title>Exemplo 08</title>
    </head>
    <body>
    <p align="left">Linha Horizontal 1</p>
    <hr width="100%" align="left" size="2"
    color="silver">
    <p align="center">Linha Horizontal 2</p>
    <hr width="70%" align="center" size="3"
    color="blue">
    <p align="right">Linha Horizontal 3</p>
    <hr width="30%" align="right" size="5" color="red"
    noshade>
    </body>
    </html>

    20
    LINHAS HORIZONTAIS
     Exemplo 08

    21

    REFERÊNCIAS BIBLIOGRÁFICAS
     IDEPAC. Apostila Web Design. Disponível em
    <http://apostilas.fok.com.br/attachments/001_Apostila-de-
    webdesign-idepac.pdf>. Acesso em 24 de agosto de 2010.

     ALVERES, Miguel Angel. Caracteres especiais. Disponível em


    <http://www.criarweb.com/artigos/31.php>. Acesso em 29 de
    agosto de 2010.

     CASTRO, Maria Alice Soares. Caracteres especiais. Disponível em


    <http://www.icmc.usp.br/ensino/material/html/especiais.html>.
    Acesso em 29 de agosto de 2010.

     W3C. Character entity references in HTML 4. Disponível em


    <http://www.w3.org/TR/html4/sgml/entities.html>. Acesso em 29 de
    agosto de 2010.

    22

    Você também pode gostar