Criando Documentos em Html
Índice da página:
Todo o documento deve ser identificado como HTML (<html> </html>),
ter uma área de cabeçalho (<head></head>) com o nome para o documento
(<title> </title>), que é o título principal e uma área definida como
corpo(<body></body>) do conteúdo do documento.
Pode inserir comentários entre as expressões <!-- Isto é um comentário -->.
Como o exemplo a seguir:
Exemplo:
Pode inserir comentários entre as expressões <!-- Isto é um comentário -->.
Como o exemplo a seguir:
Exemplo:
<html>
<head>
<title>Exemplo de HTML simples</title>
</head>
<body>
<!-- Este é o meu primeiro Exemplo -->
<h3>Este é o primeiro nível de cabeçalho</h3>
Bem-vindo ao mundo do HTML.
<p>Este é o primeiro parágrafo.</p>
<p>E este é o segundo.</p>
</body>
</html>
<head>
<title>Exemplo de HTML simples</title>
</head>
<body>
<!-- Este é o meu primeiro Exemplo -->
<h3>Este é o primeiro nível de cabeçalho</h3>
Bem-vindo ao mundo do HTML.
<p>Este é o primeiro parágrafo.</p>
<p>E este é o segundo.</p>
</body>
</html>
 Ver |
 Índice |
Todo documento em HTML deve possuir um título. De um modo geral o título aparece em lugar separado da página
(por exemplo, alto da tela no Internet Explorer), e é utilizado para identificar o documento em outros contextos ( por exemplo,
buscas Wais). É interessante que o título possa sugerir claramente o conteúdo do documento. Atenção porque o conceito
de título é diferente de cabeçalho. O título está mais para o nome do arquivo. Não é um elemento relevante na visualização
do documento como acontece com o cabeçalho. A marcação utilizada para títulos é <title>
e seu par </title>.
Exemplo:
Exemplo:
<html>
<head>
<title>Este é o Meu Título</title>
</head>
<body>
<h3>E este o cabeçalho de nível 3</h3>
Aqui entra o texto do documento ...
</body>
</html>
<head>
<title>Este é o Meu Título</title>
</head>
<body>
<h3>E este o cabeçalho de nível 3</h3>
Aqui entra o texto do documento ...
</body>
</html>
| Ver |
Índice |
Os Cabeçalhossão normalmente usados para títulos e sub-títulos de uma página.
HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maior destaque. Cabeçalhos são exibidos em
letras maiores e em negrito. O primeiro cabeçalho em cada documento deve estar marcado como <H1>.
ATENÇÃO: Ao definir o tamanho de um cabeçalho, não está definindo o tamanho da letra (fonte 10, fonte 14). Apenas define que ele aparecerá com maior tamanho e destaque que o resto do texto. O tamanho exacto com que ele será visualizado é definido pelo programa visualizador de html (browser) de cada pessoa que acessar a informação.
As notações relativas a cabeçalhos são:
Exemplo:
ATENÇÃO: Ao definir o tamanho de um cabeçalho, não está definindo o tamanho da letra (fonte 10, fonte 14). Apenas define que ele aparecerá com maior tamanho e destaque que o resto do texto. O tamanho exacto com que ele será visualizado é definido pelo programa visualizador de html (browser) de cada pessoa que acessar a informação.
As notações relativas a cabeçalhos são:
Exemplo:
<html>
<head>
<title>Exemplo Cabeçalhos</title>
</head>
<body>
<h1>Cabeçalho Nível 1</h1>
<h2>Cabeçalho Nível 2</h2>
<h3>Cabeçalho Nível 3</h3>
<h4>Cabeçalho Nível 4</h4>
<h5>Cabeçalho Nível 5</h5>
<h6>Cabeçalho Nível 6</h6>
</body>
</html>
<head>
<title>Exemplo Cabeçalhos</title>
</head>
<body>
<h1>Cabeçalho Nível 1</h1>
<h2>Cabeçalho Nível 2</h2>
<h3>Cabeçalho Nível 3</h3>
<h4>Cabeçalho Nível 4</h4>
<h5>Cabeçalho Nível 5</h5>
<h6>Cabeçalho Nível 6</h6>
</body>
</html>
| Ver |
Índice |
A marcação <p></p> é utilizada para definir o início de um novo parágrafo,
deixando uma linha em branco entre cada parágrafo. O HTML não reconhece o caracter de quebra de linha dos editores de texto.
Mesmo que exista uma linha em branco, os clientes Web só reconhecem o início de um novo parágrafo mediante a marcação apropriada.
Existem algumas excepções. Por exemplo, inserindo uma marcação de parágrafo depois de <p>, <li>,<h> e outras, esta será ignorada.
A marcação <br> faz uma quebra de linha sem acrescentar espaço extra entre as linhas. Veja a diferença do uso de <p> e <br>, no exemplo a seguir:
Exemplo:
Existem algumas excepções. Por exemplo, inserindo uma marcação de parágrafo depois de <p>, <li>,<h> e outras, esta será ignorada.
A marcação <br> faz uma quebra de linha sem acrescentar espaço extra entre as linhas. Veja a diferença do uso de <p> e <br>, no exemplo a seguir:
Exemplo:
<html>
<head>
<title>Quebras de Linha</title>
</head>
<body>
<h3>Utilizando p (Parágrafo)</h3>
<p>Vamos separar as frases com marcação de parágrafo.</p>
<p>Para verificar a diferença.</p>
<h3>Utilizando br (Nova Linha)</h3>
Note que os Cabeçalhos inserem espaço como parágrafos.<br>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha<br>
Viu a diferença?<br>
</body>
</html>
<head>
<title>Quebras de Linha</title>
</head>
<body>
<h3>Utilizando p (Parágrafo)</h3>
<p>Vamos separar as frases com marcação de parágrafo.</p>
<p>Para verificar a diferença.</p>
<h3>Utilizando br (Nova Linha)</h3>
Note que os Cabeçalhos inserem espaço como parágrafos.<br>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha<br>
Viu a diferença?<br>
</body>
</html>
| Ver |
Índice |
Para criar uma lista não numerada:
1. Comece com a marcação de início de lista: <ul>.
2. Insira a marcação <li> antes de cada item da lista item. (Não é necessário fechar a marcação com </li>)
3. Encerre com a marcação de fim de lista: </ul>.
2. Insira a marcação <li> antes de cada item da lista item. (Não é necessário fechar a marcação com </li>)
3. Encerre com a marcação de fim de lista: </ul>.
Exemplo:
<html>
<head>
<title>Lista Não Numerada</title>
</head>
<body>
<h3>Lista Não Numerada:</h3>
<ul>
<li> Maçãs
<li> Peras
<li> Uvas
</ul>
</body>
</html>
<head>
<title>Lista Não Numerada</title>
</head>
<body>
<h3>Lista Não Numerada:</h3>
<ul>
<li> Maçãs
<li> Peras
<li> Uvas
</ul>
</body>
</html>
| Ver |
Índice |
Uma lista numerada - ou ordenada - é semelhante a uma lista não numerada, exceto que utiliza
marcação <ol> ao invés de <ul>. Os items
são identificados utilizando-se a mesma notação <li>.
Exemplo:
<html>
<head>
<title>Lista Numerada</title>
</head>
<body>
<h3>Lista Numerada:</h3>
<ol>
<li> Laranjas
<li> Peras
<li> Uvas
</ol>
</body>
</html>
<head>
<title>Lista Numerada</title>
</head>
<body>
<h3>Lista Numerada:</h3>
<ol>
<li> Laranjas
<li> Peras
<li> Uvas
</ol>
</body>
</html>
| Ver |
Índice |
Uma lista de definições grupo <dl></dl> normalmente
consiste em alternar um termo (abreviado como DT) e uma definição (abreviada como DD). Clientes Web browsers geralmente
mostram a definição em nova linha com outro alinhamento.
As entradas <dt> e <dd> podem conter vários parágrafos, listas, ou outras definições.
As entradas <dt> e <dd> podem conter vários parágrafos, listas, ou outras definições.
Exemplo:
<html>
<head>
<title>Lista Defenições</title>
</head>
<body>
<h3>Lista de Defenições:</h3>
<dl>
<dt>Curso Html
<dd>Prático, simples, com bastantes exemplos e explicações.<br>
Espero tirar um bom proveito desta consulta.<br>
<dt>JoaTex.com
<dd>Site de WebDesigner, com cursos e Forums interessantes.<br>
Em Expansão, e bastante útil.
</dl>
</body>
</html>
<head>
<title>Lista Defenições</title>
</head>
<body>
<h3>Lista de Defenições:</h3>
<dl>
<dt>Curso Html
<dd>Prático, simples, com bastantes exemplos e explicações.<br>
Espero tirar um bom proveito desta consulta.<br>
<dt>JoaTex.com
<dd>Site de WebDesigner, com cursos e Forums interessantes.<br>
Em Expansão, e bastante útil.
</dl>
</body>
</html>
| Ver |
Índice |
As listas podem ser encadeadas ou intercaladas arbitráriamente, produzindo resultados bastante interessantes.
A prática é que vai mostrar qual o número máximo de listas que vale a pena intercalar. Pode-se inclusive ter um parágrafo,
intercalado com uma lista que contenha um único item.
Exemplo:
Exemplo:
<html>
<head>
<title>Listas Intercaladas</title>
</head>
<body>
<h3>Listas Intercaladas</h3>
<ul>
<li> Cidades de Portugal Norte:
<ul>
<li> Porto
<ul>
<li>Capital do Norte
<li>Museus,etc.
</ul>
<li> Guarda
<li> Penafiel
</ul>
<li> Cidades de Portugal Centro:
<ul>
<li> Leiria
<li> Coimbra
</ul>
</ul>
</body>
</html>| Ver |
Índice |
A marcação <pre></pre>(derivada de
"preformatted") delimita uma área de texto em que espaços, novas linhas e tabulações são mantidas.
Ou seja, o texto será apresentado exactamente da forma como foi digitado, mesmo que não hajam marcações do html. É uma
forma de se preservar o formato de um texto longo, e inserções na Sua página.
Podem ser definidos links dentro de textos pré-formatados. No entanto, deve-se evitar utilizar outros caracteres das marcações em áreas <pre>. Isto porque caracteres como <, >, & possuem um significado específico no HTML. O ideal é utilizar as sequências especiais, (<, > e &, respectivamente) sempre que precisar representar esses caracteres. Veremos mais adiante sobre estes items.
Exemplo:
Podem ser definidos links dentro de textos pré-formatados. No entanto, deve-se evitar utilizar outros caracteres das marcações em áreas <pre>. Isto porque caracteres como <, >, & possuem um significado específico no HTML. O ideal é utilizar as sequências especiais, (<, > e &, respectivamente) sempre que precisar representar esses caracteres. Veremos mais adiante sobre estes items.
Exemplo:
<html>
<head>
<title>Texto Pré Formatado</title>
</head>
<body>
<h3>Texto Pré Formatado</h3>
<pre>
</body>
</html>
<head>
<title>Texto Pré Formatado</title>
</head>
<body>
<h3>Texto Pré Formatado</h3>
<pre>
Este Texto tem a apresentação de como foi escrito
sem quebras de linhas ou inserção de parágrafos. É útil
para amostragem de programas como o que se segue em baixo:
<?php
if ($a == "code1"){
echo "Está Correcto!";}
else {
echo "Está Errado";}
?>
</pre></body>
</html>
| Ver |
Índice |
O HTML permite que se apliquem estilos específicos a palavras ou frases.
Vamos ver algumas opções: <b></b> Texto em Negrito.
<I></I> Texto em Itálico.
<u></u> Texto Sublinhado.
<strike></strike> Texto Riscado.
Para representar os caracteres das tags, utilize a seguintes notações:
< para representar <
> para representar >
& para representar &
" para representar "
É possível também utilizar notações especiais para acentuação. Há uma lista delas na página seguinte.
Atenção: Ao contrário do resto do HTML, as notações especiais diferenciam letras maiúsculas de minúsculas. Não é possível usar < no lugar de <. Aliás aconselhamos a usar sempre letra minúscula nos seus documentos html.
Exemplo:
Vamos ver algumas opções: <b></b> Texto em Negrito.
<I></I> Texto em Itálico.
<u></u> Texto Sublinhado.
<strike></strike> Texto Riscado.
Para representar os caracteres das tags, utilize a seguintes notações:
< para representar <
> para representar >
& para representar &
" para representar "
É possível também utilizar notações especiais para acentuação. Há uma lista delas na página seguinte.
Atenção: Ao contrário do resto do HTML, as notações especiais diferenciam letras maiúsculas de minúsculas. Não é possível usar < no lugar de <. Aliás aconselhamos a usar sempre letra minúscula nos seus documentos html.
Exemplo:
<html>
<head>
<title>Caracteres Especiais</title>
</head>
<body>
<h3>Caracteres Especiais</h3>
<b>Este Texto está em Negrito.</b><br>
<i>este está em Itálico.</i><br>
<b><i>Este está em Negrito e Itálico.</i></b><br>
<u>Este está Sublinhado.</u><br>
<strike>Este está riscado.</strike><br>
Isto é um exemplo de como apresentar código html:<br>
<html><br>
<head>...etc.<br>
</body>
</html>
<head>
<title>Caracteres Especiais</title>
</head>
<body>
<h3>Caracteres Especiais</h3>
<b>Este Texto está em Negrito.</b><br>
<i>este está em Itálico.</i><br>
<b><i>Este está em Negrito e Itálico.</i></b><br>
<u>Este está Sublinhado.</u><br>
<strike>Este está riscado.</strike><br>
Isto é um exemplo de como apresentar código html:<br>
<html><br>
<head>...etc.<br>
</body>
</html>
| Ver |
Índice |
A marcação <hr> produz uma linha horizontal no documento. A sua
altura é ajustada em pixels através da extensão size="2" (2 pixels), a
largura é nos dada pela extensão width="75%" (este valor poderá ser em
percentagem ou em pixels). Tome em consideração as resoluções das páginas, hoje em dia as mais usadas são 800x600 e
1024x768. A cor é dada pela extensão color="#FFFF99" que corresponde
ao seu valor hexadecimal.(Para os iniciantes apresentamos uma tabela auxiliar com algumas cores em nomenclatura e hexadecimal na página seguinte),
não se esqueça que poderá haver uma combinação de 16 Milhões de cores, portanto estas tabelas são a resolução das cores mais comuns.
Finalmente a posição é dado pela estensão align="center" (centro), existem ainda:
left (Esquerda) e right (Direita).
Exemplo:
Exemplo:
<html>
<head>
<title>Barras Horizontais</title>
</head>
<body>
<h3>Barras Horizontais</h3>
<hr width="75%" size="2" align="center" color="#ffd700"><br>
<hr width="75%" size="2" align="center" color="#ffd700"><br>
<hr width="300" size="4" align="left" color="#ff9900"><br>
<hr width="300" size="4" align="left" color="#ff9900"><br>
<div align="right"><hr width="350" size="8" align="right" color="#ff45fg"></div>
<hr width="350" size="8" align="right" color="#ff45fg"><br>
</body>
</html>
<head>
<title>Barras Horizontais</title>
</head>
<body>
<h3>Barras Horizontais</h3>
<hr width="75%" size="2" align="center" color="#ffd700"><br>
<hr width="75%" size="2" align="center" color="#ffd700"><br>
<hr width="300" size="4" align="left" color="#ff9900"><br>
<hr width="300" size="4" align="left" color="#ff9900"><br>
<div align="right"><hr width="350" size="8" align="right" color="#ff45fg"></div>
<hr width="350" size="8" align="right" color="#ff45fg"><br>
</body>
</html>
| Ver |
Índice |
