Como alinhar o texto em html

“Linguagem de marcação de hipertexto” é a linguagem básica de projetar um site. Sabe-se que o HTML é um idioma de front-end para projetar a interface de um site. Existem muitas funções em relação a este idioma. Os comandos usados ​​para o design são conhecidos como tags. Essas tags se combinam para desenvolver um site. Um único arquivo de código HTML é responsável por um site estático que não está em execução. Os conteúdos HTML são texto, imagem, formas, cor, alinhamento, etc. O alinhamento é um ingrediente importante no projeto, pois determina o respectivo conteúdo a ser manuseado em um local específico. Discutiremos alguns exemplos básicos neste guia.

Ferramentas necessárias

Para elaborar o conceito de alinhamento no HTML, precisamos mencionar algumas ferramentas necessárias para executar o código HTML. Um é um editor de texto e o segundo é um navegador. Um editor de texto talvez um bloco de notas, sublime, bloco de notas ++ ou qualquer outro que possa ajudar. Neste guia, usamos o bloco de notas, um aplicativo padrão no Windows e Google Chrome como navegador.

Formato html

Para entender o alinhamento, precisamos primeiro ter um pouco de conhecimento do básico html. Apresentamos a captura de tela de um código de amostra.

..
.. .

HTML tem duas partes principais. Um é a cabeça, e o outro é o corpo. Todas as tags são escritas em colchetes angulares. A parte principal lida com a nomeação da página HTML usando a tag de "Title". E também, use a declaração de estilo dentro da cabeça. Por outro lado, o corpo lida com todas as outras tags de texto, imagens ou vídeos, etc. Em outras palavras, o que você quiser adicionar à sua página HTML está escrito na parte do corpo da HTML.

Uma coisa que preciso destacar aqui é a abertura e o fechamento da tag. Cada etiqueta que está escrita deve ser fechada. Por exemplo, o HTML tem uma tag de partida e a tag final é . Portanto, observa -se que a etiqueta final tem uma barra seguida pelo nome da tag. Da mesma forma, todas as outras tags também seguem a mesma abordagem. Cada editor de texto é então salvo com a extensão do HTML. Por exemplo, usamos um arquivo com o exemplo de exemplo.html. Então você verá que o ícone do bloco de notas mudou para o ícone do navegador.

Como o alinhamento é conteúdo de estilo. O estilo em HTML é de três tipos. Um estilo em linha, estilo interno e externo. O embutido implica na tag. Interno está escrito dentro da cabeça. Ao mesmo tempo, o estilo externo é escrito em um arquivo CSS separado.

Estilo inline do texto

Exemplo 1

Agora é hora de discutir um exemplo aqui. Considere a imagem exibida acima. Nesse arquivo do bloco de notas, escrevemos um texto simples. Quando o executamos como um navegador, ele mostrará a saída abaixo no navegador.

Se queremos que este texto seja exibido no centro, alteraremos a tag.

Esta tag é uma tag embutida. Vamos escrever esta tag quando apresentarmos a tag de parágrafo no corpo HTML. Após o texto, feche a etiqueta do parágrafo. Salve e depois abra o arquivo no navegador.

O parágrafo está alinhado no centro, como é exibido no navegador. A tag usada neste exemplo é usada para qualquer alinhamento, eu.e., para a esquerda, direita e centro. Mas se você deseja alinhar apenas o texto no centro, uma tag específica é usada para esse fim.

..

A etiqueta central é usada antes e depois do texto. Isso também mostrará o mesmo resultado do exemplo anterior.

Exemplo 2

Este é um exemplo de alinhar o cabeçalho em vez de um parágrafo no texto HTML. A sintaxe para esse alinhamento do cabeçalho é a mesma. Isso pode ser feito através da tag ou por estilo embutido ou adicionando a tag alinhada dentro da tag de cabeçalho.

A saída é mostrada no navegador. A tag de título converteu o texto sem formatação em um título e a tag alinhou no centro.

Exemplo 3

Alinhe o texto no centro

Considere um exemplo em que há um parágrafo exibido no navegador. Precisamos alinhar isso no centro.

Vamos abrir este arquivo no bloco de notas e depois alinhá -lo na posição central usando a tag.

Depois de adicionar esta tag na tag de parágrafo, salve o arquivo e execute -o no navegador. Você verá que o parágrafo agora está centrado. Veja a imagem abaixo.

Alinhe o texto à direita

Para inclinar o texto para a direita, é semelhante a posicioná -lo no centro da página. Apenas a palavra "centro" é substituída por "Right" na etiqueta do parágrafo.

..

As mudanças podem ser vistas através da imagem anexada abaixo.

Salve e atualize a página da web no navegador. O texto agora está movido para o lado direito da página.

Estilo interno de texto

Exemplo 1

Como descrito acima, o CSS interno (folha de estilo em cascata) ou estilo interno é um tipo de CSS que é definido na parte da cabeça do HTML da página. Funciona da mesma forma que as tags internas fazem.

Considere a página mostrada acima; Ele contém os títulos e o parágrafo. Temos um requisito para ver o texto no centro. O alinhamento em linha requer a escrita manual de tags dentro de cada parágrafo. Mas o estilo interno pode ser aplicado automaticamente a cada parágrafo do texto mencionando P na declaração de estilo. Não há necessidade de escrever nenhuma tag dentro da tag de parágrafo. Agora observe o código e está funcionando.

Esta tag está escrita dentro da tag de estilo na parte da cabeça. Agora execute o código no navegador.

Quando você executa a página no navegador, você verá que todos os parágrafos estão alinhados no centro da página. Esta tag é aplicada a todos os parágrafos presentes no texto.

Exemplo 2

Neste exemplo, assim como um parágrafo, alinharemos todos os títulos do texto ao lado direito. Para esse fim, mencionaremos os títulos na declaração de estilo dentro da cabeça.

H2, H3

Alinhamento de texto: certo

Agora, depois de salvar o arquivo, execute o arquivo no bloco no navegador. Você verá que os títulos estão alinhados no lado direito da página HTML.

Exemplo 3

No estilo interno, pode haver uma situação em que você precisa alinhar o texto de apenas alguns parágrafos no texto, enquanto outros permanecem os mesmos. Portanto, estamos usando o conceito de classe. Apresentamos a classe com um método de ponto dentro da tag de estilo. É necessário adicionar o nome da classe dentro da tag de parágrafo que você deseja alinhar.

< p class = “center”>..

Adicionamos a aula nos três primeiros parágrafos. Agora execute o código. Você pode ver na saída que os três primeiros parágrafos estão alinhados no centro, enquanto outros não são.

Conclusão

Este artigo explicou que o alinhamento poderia ser feito de maneiras diferentes por meio de tags internas e internas.