Portal Chamar Táxi

HTML Básico - Alinhamento de Texto

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Objetivo:

O objetivo deste tutorial é continuar aprendendo a linguagem html básica, vamos aprender os comandos para alinhamento de textos.



Pré-requisito:

Para você poder acompanhar o desenvolvimento deste tutorial, será necessário ter conhecimento no mínimo do
de informática básica e Parte 1 do tutorial html básico.



Nota:

Irei ensinar a linguagem de html de uma forma bem objetiva, ou seja, iremos aprender na prática através da criação páginas.



Vamos começar criando uma página na qual daremos o nome de index.html, inserir nesta página uma pequena frase de minha autoria para que possamos fazer as alterações quanto ao alinhamento do texto, sendo que vou ensinar os seguintes posicionamento básicos:



Alinhamento do texto a esquerda;

Alinhamento do texto centralizado;

Alinhamento do texto a direita;

Alinhamento do texto justificado.



Copie abaixo a página, cole dentro do bloco de notas e salve a mesma com nome que definimos dentro da pasta site que deve se encontrar na area de trabalho do seu computador.



<html>

<head>

<title>Alinhamento de texto</title>

</head>

<body>



Nunca desista do seu sonho, lute por ele sempre que algum dia você irá realiza-lo e se nessa vida não conseguir fazer tudo faça tudo aquilo que pode.



</body>

</html>
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Veja como deve ficar esta página através da tela abaixo:

htmlbasico002_clip_image002.jpg


Tela 001



Para colocar o texto alinhado a esquerda utilizamos a seguinte tag:



<p align=”Left”> * Aqui você insere o texto </p>



Para colocar o texto centralizado no meio da página utilize a seguinte tag:



<p align=”center”> *Aqui voce insere o texto </center>



Para colocar o texto a direita utilize a seguinte tag:



<p align=”Right”> * Aqui você insere o texto </center> </p>



<p align=”Justify”> *Aqui você insere o texto </center>



Veja no texto acima que esta alinhado a esquerda, mas igual vamos colocar ele entre cada uma das tags para podermos observar o seu posicionamento, veja estes procedimentos através das telas baixos.



Primeiro vamos ver como fica o texto alinhado a esquerda, para isso através da página index.html abra o código fonte e depois coloque a tag <p align=”left”></P> de maneira que o texto fique no meio e salve.

htmlbasico002_clip_image004.jpg


Tela 002 (Selcionado o código fonte)

htmlbasico002_clip_image006.jpg


Tela 003 (Texto entre a tag de alinhamento a esquerda)

htmlbasico002_clip_image008.jpg
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Tela 004 (Note que o texto quase não se altera porque mas o mesmo esta com a formatação de alinhamento a esquerda)



Para as demais formatações o processo é o mesmo que acabamos de fazer, ou seja, para o próximo alinhamento que será o centralizado, você pode apenas subistituir o nome “left” por “center” e assim para as demais tags, por isso vou mostrar apenas como deve ficar as telas com o alinhamento do texto.



- Alinhamento centralizado.
htmlbasico002_clip_image010.jpg


Tela 005 (Note o texto centralizado)



- Alinhado a direita
htmlbasico002_clip_image012.jpg


Tela 006 (Texto a direita)



- Texto Justificado, nesta formatação irei mostrar em duas telas a primeira eu aumentei o texto e deixei alinha a direita, na segunda tela eu coloquei o texto justificado para que você possa notar a diferênça.
htmlbasico002_clip_image014.jpg




Tela 007
htmlbasico002_clip_image016.jpg


Tela 008 (Note que a palavra “nunca” no canto direito ficou com mais espaço para a direita, assim com a frase ficou mais espaços entre as palavras)
 
Topo