HTML: TEXTOS SUMÁRIO. Cabeçalhos para títulos e sub-títulos Parágrafos

Tamanho: px

Começar a partir da página:

Download "HTML: TEXTOS SUMÁRIO. Cabeçalhos para títulos e sub-títulos Parágrafos"

Rafaela Rico Brandt
6 Há anos
Visualizações:

1 HTML: TEXTOS CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB I PROF. ALEXANDRO DOS SANTOS SILVA 1 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

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 <title>exemplo 01</title> <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> 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 5 CABEÇALHOS PARA TÍTULOS E SUB-TÍTULOS Possibilidade de alinhamento de cabeçalhos Atributo

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 5 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 <title>exemplo 02</title> <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> 6

4 CABEÇALHOS PARA TÍTULOS E SUB-TÍTULOS Exemplo 02: uso de alinhamentos em cabeçalhos 7 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 <title>exemplo 03</title> <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> 8

página no navegador Espaços em branco após a tag de abertura ou antes da tag de fechamento de

5 PARÁGRAFOS Exemplo 03: uso de alinhamentos em parágrafos 9 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 <title>exemplo 04</title> <p>texto 1 Texto 2</p> 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

6 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 <title>exemplo 05</title> <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> 11 QUEBRAS DE LINHAS Exemplo 05: quebras de linhas no interior de um parágrafo 12

7 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> <title>exemplo 06</title> <pre>texto 1 Texto 2</pre> 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 <meta content="text/html; charset=utf-8" /> <title>caracteres Especiais</title> Caracteres com uso especial em HTML: <, > e & 14

8 CARACTERES ESPECIAIS Caracteres de acentuação da língua portuguesa á á Á Á ã ã Ã Ã â â Â Â à à À À é &eacute É É ê ê Ê Ê í é Í Í ó ó Ó Ó õ õ Õ Õ ô ô Ô Ô ú ú Ú Ú ü ü Ü Ü ç ç Ç Ç 15 CARACTERES ESPECIAIS Alguns símbolos de pontuação Espaço A relação completa de caracteres especiais se encontra disponível no endereço 16 & & comercial & > Maior que > < Menor que < ^ Acento circunflexo ˆ ~ Acento til Acento trema Acento agudo &cute; Cedilha " Aspas duplas " º Ordinal masculino º ª Ordinal feminino ª Marcador (bullet)

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 <!

9 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 <title>exemplo 07</title>  <h3>esta página contém um comentário que não é apresentado pelo navegador</h3> 17 COMENTÁRIOS Exemplo 07: uso de comentários 18

10 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 <title>exemplo 08</title> <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> 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-dewebdesign-idepac.pdf>.

11 LINHAS HORIZONTAIS Exemplo REFERÊNCIAS BIBLIOGRÁFICAS IDEPAC. Apostila Web Design. Disponível em < Acesso em 24 de agosto de ALVERES, Miguel Angel. Caracteres especiais. Disponível em < Acesso em 29 de agosto de CASTRO, Maria Alice Soares. Caracteres especiais. Disponível em < Acesso em 29 de agosto de W3C. Character entity references in HTML 4. Disponível em < Acesso em 29 de agosto de

Documentos relacionados

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML INICIO DE HTML Neste tutorial usaremos o já conhecido Notepad++ ou Bloco de Notas e um Browser (Chrome, Mozilla ou Internet Explorer). Para nossos exemplos usaremos o Chrome. A estrutura básica de uma