Ferramentas necessárias
Para elaborar o conceito de alinhamento em 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 pode ser um notepad, sublime, notepad ++ ou qualquer outro que possa ajudar. Neste guia, usamos o bloco de notas, um aplicativo padrão do Windows, e o Google Chrome como navegador.
Formato HTML
Para entender o alinhamento, primeiro precisamos ter alguns conhecimentos básicos de HTML. Apresentamos a captura de tela de um código de amostra.
< html >
< cabeça >...</ cabeça >
< corpo >…</ corpo >
</ html >
HTML tem duas partes principais. Um é a cabeça e o outro é o corpo. Todas as tags são escritas entre colchetes angulares. A parte principal trata de nomear a página html usando a tag de título. 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, tudo o que você deseja adicionar à sua página html é escrito na parte do corpo do html.
Uma coisa que preciso destacar aqui é a abertura e o fechamento da tag. Cada tag gravada deve ser fechada. Por exemplo, Html possui tag inicial de e a tag final é. Assim, observa-se que a tag de finalização possui uma barra seguida do nome da tag. Da mesma forma, todas as outras tags também seguem a mesma abordagem. Cada editor de texto é salvo com a extensão html. Por exemplo, usamos um arquivo com o nome example.html. Em seguida, você verá que o ícone do bloco de notas mudou para o ícone do navegador.
Como o alinhamento é o conteúdo do estilo. O estilo em html é de três tipos. Um estilo em linha, estilo interno e externo. Inline implica na tag. Interno é escrito dentro da cabeça. Ao mesmo tempo, o estilo externo é escrito em um arquivo CSS separado.
Estilo embutido de 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 mostra a saída fornecida a seguir no navegador.
Se quisermos que esse texto seja exibido no centro, vamos alterar a tag.
Esta tag é uma tag embutida. Vamos escrever essa tag quando introduzirmos a tag de parágrafo no corpo do html. Após o texto, feche a tag de parágrafo. Salve e abra o arquivo no navegador.
O parágrafo é alinhado no centro, conforme é exibido no navegador. A etiqueta usada neste exemplo é usada para qualquer alinhamento, ou seja, para esquerda, direita e centro. Mas se você quiser alinhar o texto apenas no centro, uma tag específica é usada para esse propósito.
< Centro > …… ..</ Centro >A marca central é usada antes e depois do texto. Isso também mostrará o mesmo resultado do exemplo anterior.
Exemplo 2
Este é um exemplo de alinhamento do título em vez de um parágrafo no texto html. A sintaxe para este alinhamento de título é a mesma. Isso pode ser feito por meio da tag ou do estilo embutido ou adicionando a tag de alinhamento dentro da tag de título.
A saída é mostrada no navegador. A tag de título converteu o texto simples em um título, e a tag o 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, em seguida, alinhá-lo na posição central usando a tag.
< p estilo =texto-alinhar: centro;>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á centralizado e alinhado. Veja a imagem abaixo.
Alinha o texto à direita
Inclinar o texto para a direita é semelhante a posicioná-lo no centro da página. Apenas a palavra central é substituída por direita na tag do parágrafo.
< p estilo =texto-alinhar: certo;> ……… ..</ p >As mudanças podem ser vistas na imagem anexa abaixo.
Salve e atualize a página da web no navegador. O texto agora é movido para o lado direito da página.
Estilo interno de texto
Exemplo 1
Conforme descrito acima, esse css interno (folha de estilo em cascata) ou estilo interno é um tipo de css definido no cabeçalho do html da página. Funciona de forma semelhante às tags internas.
Considere a página mostrada acima; ele contém os títulos e o parágrafo nele. Temos o requisito de ver o texto no centro. O alinhamento embutido 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 qualquer tag dentro da tag de parágrafo. Agora observe o código e ele está funcionando.
< estilo >P{Texto-alinhar: Centro}
</ estilo >
Esta tag é escrita dentro da tag de estilo na parte do cabeçalho. Agora execute o código no navegador.
Ao executar 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, como um parágrafo, alinharemos todos os títulos do texto à direita. Para isso, mencionaremos os cabeçalhos na declaração de estilo dentro do cabeçalho.
H2, h3{
Texto-alinhar: direito
}
Agora, depois de salvar o arquivo, execute o arquivo do bloco de notas 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ê precise alinhar o texto de apenas alguns parágrafos do 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 deseja alinhar.
< estilo >.Centro{
Texto-alinhar: Centro}
</ estilo >
classe =centro> ……</ p >
Adicionamos a classe nos primeiros três 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.
Conclusão
Este artigo explicou que o alinhamento pode ser feito de maneiras diferentes por meio de tags inline e internas.