A ideia dessa sequência de artigos é passar o básico necessário para que você sozinho(a) consiga criar seus próprios anúncios no Mercado Livre, de maneira otimizada e sem precisar contratar mão de obra especializada. O foco será a parte da descrição do seu anúncio, onde poderá criar elementos HTML e deixá-los com aparência melhor e mais sofisticada deixando assim os seus anúncios mais profissionais. Hoje veremos as formas de inserir e formatar textos em códigos HTML:
Aula 2 - Inserção de texto nas páginas
Comentários
<!-- Comentários sobre o trecho -->
Qualquer texto escrito dentro da limitação dos marcadores <BODY> e </BODY> será exibido em tela, a menos que seja um comentário. Comentários são colocados dentro de páginas entre os marcadores <!-- e --> e servem apenas para documentação, sendo ignorados pelo navegador. Este o seguinte exemplo na página aula1.html:
<html>
<head>
<title>Mercado Livre na Prática</title>
</head>
<body>
comentário 1
<!--comentário 2-->
</body>
</html>
Abra a página; Repare que só irá aparecer no browser o comentário 1. O comentário 2 só irá aparecer no código fonte da página. Segue o exemplo na prática:<head>
<title>Mercado Livre na Prática</title>
</head>
<body>
comentário 1
<!--comentário 2-->
</body>
</html>
Parágrafos
<p> texto </p>
Delimita um parágrafo. Resultado da aplicação deste marcador é uma linha em branco antes do inicio do parágrafo. Exemplo:
<html>
<head>
<title> Parágrafo </title>
</head>
<body>
Testando sem colocar parágrafo.
<p> Agora com o marcador de parágrafo. </p>
Linha seguinte
</body>
</html>
Segue o exemplo anterior na prática:<head>
<title> Parágrafo </title>
</head>
<body>
Testando sem colocar parágrafo.
<p> Agora com o marcador de parágrafo. </p>
Linha seguinte
</body>
</html>
Quebras de linha
<BR>
Marcador utilizado para separar uma linha da outra sem um espaço em branco entre as duas. É importante observar que o marcador <BR> deve vir no final da linha que se quer separar. Importante: Não necessita de tag para fechar. Exemplo:
<html>
<head>
<title> Quebras de linha </title>
</head>
<body>
Testando sem colocar parágrafo
<p> Agora com o marcador de parágrafo. </p>
Agora com a quebra de linha<BR>
Linha seguinte
</body>
</html>
Segue exemplo anterior na prática:<head>
<title> Quebras de linha </title>
</head>
<body>
Testando sem colocar parágrafo
<p> Agora com o marcador de parágrafo. </p>
Agora com a quebra de linha<BR>
Linha seguinte
</body>
</html>
DIV
<DIV ALIGN="alinhamento"></DIV>
Configura o alinhamento de um texto. Útil quando se quer alinhar um conjunto de parágrafos. O parâmetro ALIGN pode conter um dos valores: LEFT, CENTER, RIGHT ou JUSTIFY. Exemplo:
<P> Parte 1 <DIV ALIGN="CENTER"> vai separar </DIV> Parte 2</P>
Segue exemplo anterior na prática:
CENTER
<CENTER></CENTER>
Centraliza o texto ou imagem contida em sua delimitação. Exemplo:
<CENTER>
<P>Este é o texto que irá ficar centralizado.</P>
</CENTER>
<P>Este texto não irá ficar centralizado, pois está fora do center</P>
Segue exemplo na prática:<P>Este é o texto que irá ficar centralizado.</P>
</CENTER>
<P>Este texto não irá ficar centralizado, pois está fora do center</P>
FORMATAÇÕES DO TEXTO
<FONT FACE="nome da fonte" SIZE="tamanho da fonte" COLOR="cor da fonte"></FONT>
Configura a tipologia, tamanho e cor do texto, sendo que não há necessidade da utilização de todos os atributos juntos.FACE: Configura a fonte usada.
SIZE: Configura o tamanho da fonte.
COLOR: Configura a cor usada para a fonte.
Exemplo:
<FONT FACE=”Arial” SIZE=”8pt” COLOR=”#FF0000”>Texto colorido :)</FONT>
Segue o exemplo anterior na prática:
Linhas Horizontais
<HR>
Utilizadas para dar destaque a títulos ou para criar a sensação de quebra entre um item de informação e outro. O marcador <HR> (Horizontal Line) pode ser utilizado com ou sem parâmetros. O comprimento da linha WIDTH pode ser a largura exata da linha ou uma porcentagem da largura da tela.
O padrão para a linha é de uma linha sombreada. No caso de não desejar uma linha sombreada é necessário acrescentar o atributo NOSHADE ao final dos atributos do marcador <HR>
Exemplos de linhas:
Esse texto está antes da primeira linha.
<HR WIDTH="200" SIZE="4">
Esse texto está após a primeira linha e antes da segunda linha.
<HR WIDTH="50%" ALIGN="left">
Esse texto está após a segunda linha e antes da terceira linha.
<HR SIZE="8" COLOR="#00FF00" ALIGN="right" NOSHADE>
Esse texto está após a terceira linha.
Segue exemplo anterior na prática:<HR WIDTH="200" SIZE="4">
Esse texto está após a primeira linha e antes da segunda linha.
<HR WIDTH="50%" ALIGN="left">
Esse texto está após a segunda linha e antes da terceira linha.
<HR SIZE="8" COLOR="#00FF00" ALIGN="right" NOSHADE>
Esse texto está após a terceira linha.
Textos pré-formatados
<PRE></PRE>
Permite que o texto seja exibido em tela na maneira exata em que foi digitado, respeitando os espaços criados pela barra de espaços do teclado e as entradas de parágrafos feitas através de ENTER.Apesar da vantagem dessa forma de alinhamento arbitrário, o marcador <PRE> muda o tipo de caractere para uma fonte mono espaçada - é aquela que na qual todos os caracteres ocupam o mesmo espaço na horizontal, ao contrário da fonte proporcional, na qual o "i" ocupa menos espaço que o "m".
No entanto pode ser substituída por outra desde que se utilize o marcador <FONT FACE="fonte escolhida"> entre os delimitadores <PRE></PRE>. Exemplo:
<PRE>
Esse é um teste da tag PRE
Nome:Rafael de Mello
Idade: 31 anos
</PRE>
A saída no browser deverá ser a seguinte:Esse é um teste da tag PRE
Nome:Rafael de Mello
Idade: 31 anos
</PRE>
Títulos
<H1></H1>
Identifica títulos, usados para dividir seções do texto. Existem 6 níveis de títulos. Numerados de H1 a H6, que são exibidos em fonte maior que a fonte normal. Os marcadores de título podem ser alinhados. Exemplo:
<html>
<head>
<title> Títulos </title>
</head>
<body>
<H1> Aqui vai o título 1</H1>
<H2> Aqui vai o título 2</H2>
<H3> Aqui vai o título 3</H3>
<H4> Aqui vai o título 4</H4>
<H5> Aqui vai o título 5</H5>
<H6> Aqui vai o título 6</H6>
</body>
</html>
<head>
<title> Títulos </title>
</head>
<body>
<H1> Aqui vai o título 1</H1>
<H2> Aqui vai o título 2</H2>
<H3> Aqui vai o título 3</H3>
<H4> Aqui vai o título 4</H4>
<H5> Aqui vai o título 5</H5>
<H6> Aqui vai o título 6</H6>
</body>
</html>
Segue o exemplo anterior na prática:
Usaremos muito essas tags para nossa aula de SEO(Search Engine Optimization). Esse conceito é muito importante para aumentar o tráfego orgânico de suas páginas e anúncios.
Conclusão
Passei o mínimo necessário para você conseguir inserir textos corretamente em suas páginas de anúncios no Mercado Livre. No contexto de HTML teriam outros conceitos sobre textos a serem abordados, porém não é o escopo do presente projeto.
Usaremos muito essas tags para nossa aula de SEO(Search Engine Optimization). Esse conceito é muito importante para aumentar o tráfego orgânico de suas páginas e anúncios.
Conclusão
Passei o mínimo necessário para você conseguir inserir textos corretamente em suas páginas de anúncios no Mercado Livre. No contexto de HTML teriam outros conceitos sobre textos a serem abordados, porém não é o escopo do presente projeto.
Nenhum comentário:
Postar um comentário