Post on 25-Jul-2015
Aula-003
Formatando Páginas Web
Inserindo Parágrafos e Quebras de Linhas
Linhas Horizontais, Títulos e Subtítulos
2011.1 Curso de HTML Básico – Derlival Barros 2
Linhas Horizontais, Títulos e Subtítulos
Comentários em Páginas Web
Acentuação e Caracteres Especiais
Formatando Páginas Web
• Na aula anterior, aprendemos a criar um documentoHTML simples;
• Agora iremos aprender a formatar uma página Webusando tags;
• Primeiro iremos formatar uma página exibindo:
2011.1 Curso de HTML Básico – Derlival Barros 4
• Texto em negrito• Texto em itálico• Texto sublinhado
Exibindo Texto em Negrito
• Para exibir uma palavra ou parte de um texto emnegrito, utiliza-se a tag Bold (negrito);
• As tags responsáveis por esta função são: <b> e </b>.
• Ex.: <b>Bem Vindos ao Curso de HTML Basico</b>
2011.1 Curso de HTML Básico – Derlival Barros 5
• Ex.: <b>Bem Vindos ao Curso de HTML Basico</b>
Exibindo Texto em Itálico
• Para exibir uma palavra ou parte de um texto em itálico,utiliza-se a tag Italic (itálico);
• As tags responsáveis por esta função são: <i> e </i>.
• Ex.: <i>Bem Vindos ao Curso de HTML Basico</i>
2011.1 Curso de HTML Básico – Derlival Barros 6
• Ex.: <i>Bem Vindos ao Curso de HTML Basico</i>
Exibindo Texto Sublinhado
• Para exibir uma palavra ou parte de um texto emsublinhado, utiliza-se a tag Underline (sublinhado);
• As tags responsáveis por esta função são: <u> e </u>.
• Ex.: <u>Bem Vindos ao Curso de HTML Basico</u>
2011.1 Curso de HTML Básico – Derlival Barros 7
• Ex.: <u>Bem Vindos ao Curso de HTML Basico</u>
Criando Parágrafos
• Você pode utilizar a tag Paragraph para agrupar linhasde texto em uma página Web;
• O browser irá exibir o texto em um único parágrafo sevocê não criar outros;
• As tags responsáveis por esta função são: <p> e </p>.
2011.1 Curso de HTML Básico – Derlival Barros 9
Quebras de Linhas
• Por padrão, os browsers automaticamente encaixam otexto de uma página Web na janela do navegador;
• Se você precisar exibir uma parte do texto em uma novalinha, você pode inserir uma quebra de linha utilizando atag Break ;
• O browser exibe a parte do texto escrito após a tag
2011.1 Curso de HTML Básico – Derlival Barros 10
• O browser exibe a parte do texto escrito após a tagBreak em uma nova linha;
• As tag responsável por esta função é: <br>.
Linhas Horizontais
• Você usa linhas horizontais para dividir a informaçãoexibida em blocos diferentes;
• As tag responsável por esta função é: <hr>;• O browser exibe uma linha horizontal na página Web no
ponto que você especificou a tag. Automaticamente éinserida uma linha em branco antes da linha horizontal.
2011.1 Curso de HTML Básico – Derlival Barros 12
inserida uma linha em branco antes da linha horizontal.
Título e Subtítulos (Cabeçalhos)
• Vamos aprender como adicionar título e subtítulo emuma página Web;
• Você pode inserir título e subtítulo em diferentes blocosde texto, a fim de aumentar a legibilidade;
• Existem seis níveis de cabeçalho e eles são exibidos emnegrito;
2011.1 Curso de HTML Básico – Derlival Barros 14
negrito;• As tags responsáveis por esta função são: <h#> e
</h#>.
Comentários
• Os comentários são usados para incluir notas,sugestões e explicações que não fazem parte dodocumento;
• Web browsers ignoram texto, tags e outros objetos queestão entre a tag Comment (comentário);
• As tag responsável por esta função é: <!-- xxxxxx -->.
2011.1 Curso de HTML Básico – Derlival Barros 16
• As tag responsável por esta função é: <!-- xxxxxx -->.
Acentos e Caracteres Especiais
• Ao usar um editor de texto que permita acentuação paracriar um página, corremos o risco dos acentos nãoserem interpretados corretamente por alguns browsers,em especial browsers instalados em países onde não seutiliza acentuação, como os Estados Unidos, porexemplo;
2011.1 Curso de HTML Básico – Derlival Barros 18
exemplo;• Se quisermos garantir que a acentuação da nossa
página será universalmente entendida devemos usar asentities;
• Nas entities faz diferença usar caracteres maiúsculos ouminúsculos;
Acentos e Caracteres Especiais
• Na verdade entities é o único caso onde a HTML é case-sensitive;
• É verdade que é muito trabalhoso colocar as entities aoinvés de usar diretamente os caracteres acentuados;
• Alguns editores permitem que digitemos os acentos eeles se encarregam de converter para as entities;
2011.1 Curso de HTML Básico – Derlival Barros 19
eles se encarregam de converter para as entities;• A tabela a seguir especifica as entities usadas para
conseguir letras acentuadas, e alguns caracteresespeciais como c cedilha, símbolo de copyright,caracteres nórdicos, etc.
Tabela de Caracteres Especiais
Nome Código Caractere
Agudo &*acute; á
Circunflexo &*circ; ê
Acento Grave &*grave; à
Cedilha &*cedil; ç
Til &*tilde; ã
Trema &*uml; ü
Copyright © ©
Marca Registrada ® ®
Espaço Espaço em Branco
2011.1 Curso de HTML Básico – Derlival Barros 20
Obs.: O * é uma variável, representa o caractere qu e você irá utilizar, devendo ser substituído por uma letra maiúscula ou minúscula.