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.
Conteúdo Programático
No presente artigo apresento: Conceitos e Elementos Básicos de HTML. Nos seguintes mostrarei os seguintes temas:
- Textos nas páginas
- Imagens nas páginas
- Listas
- Links
- Editando uma descrição em um anúncio novo no Mercado Livre
- SEO
Conceitos e Elementos Básicos de HTML
O que é HTML
HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto) é uma linguagem considerada a base de todas as outras linguagens de desenvolvimento de projetos para WEB. Com ela você pode compartilhar fotos, vídeos, músicas, textos e fazer muitas coisas.
A linguagem HTML foi criada com a visão de que todos os dispositivos deveriam ser capazes de usar informações da Web: PCs com placas de vídeos e monitores de diferentes resoluções e profundidades de cores; telefones celulares; dispositivos para processar entrada e saída de voz; computadores com taxa de transferência alta ou baixa e assim por diante.
Foi a primeira linguagem no setor e é usada amplamente até os dias atuais. Foi criada pelo Tim Berners-Lee quando ele trabalhava como pesquisador para o CERN (Laboratório Europeu de Física de Partículas, na Suíça). Foi popularizado pelo aparecimento do browser Mosaic, criado por Marc Andreessen quando ele estudava na Universidade de Illinois.
Tags
Uma página básica em HTML é um arquivo de texto simples contendo o texto da página e os comandos HTML que definem a formatação das mesmas. Os comandos são indicados entre os marcadores chamados TAG que vem entre os símbolos de < e >. A maioria dos comandos é usada em pares, sendo que quando você abre alguma TAG como, por exemplo, a TAG <BODY>você precisará fechar repetindo a TAG assim: </BODY>. A TAG com barra (/) significa que está fechando a que esta sem barra.
Mais exemplos:
<BODY> </BODY>
<HTML> </HTML>
<P> </P>
<div></div>
<table></table>
<form></form>
<font></font>
<center></center>
Criando a 1ª página
Primeiramente crie uma pasta para salvar as páginas. Sempre deixe os arquivos do site muito bem organizados, assim facilita e muito o desenvolvimento dele. Depois de criado uma pasta no Desktop ou em qualquer outro lugar de sua preferência abra o Bloco de Notas.
Depois de aberto digite o seguinte código: (Atenção! Não copie, e sim digite. Assim você já começa a praticar.)
<html>
<head>
<title> Mercado Livre na Prática</title>
</head>
<body>
Olá Mundo!!!
</body>
</html>
Entendendo o que acabamos de digitar:
- A TAG <HTML> indica que você iniciou um arquivo HTML;
- A TAG <HEAD> indica que você abriu um cabeçalho;
- A TAG <TITLE> que deve ser usada dentro do cabeçalho <HEAD>, serve para colocar titulo na página, é aquela frase que aparece na barra de títulos do Windows quando a página está aberta;
- A TAG <BODY> indica que se iniciou o corpo da pagina. É dentro desta TAG que iremos criar boa parte das TAG’s utilizadas para fazer uma página.
Atenção: Em seus anúncios no Mercado Livre você não usará as tags HTML, HEAD e TITLE, já que a área editável de sua descrição está automaticamente dentro do corpo(BODY) do anúncio. Aprendemos a usar aqui porque você está criando uma página teste e a mesma precisa de todos os elementos básicos de uma página HTML.
O resultado é mostrado a seguir:
Salvando uma página HTML
Depois de digitado o código acima, salve o arquivo como aula1.html (ou .htm). Lembre-se de digitar o .html no final do nome do arquivo. Pois se digitar apenas aula1 e já clicar em salvar o Bloco de notas vai pensar que você está fazendo um arquivo de texto comum, e irá salvar em formato TXT. Vá até sua pasta e dê um duplo clique na página que acabamos de criar. A saída deverá ser a mostrada na próxima página:
Principais marcadores do body
BGCOLOR
<BODY BGCOLOR="cor">
Determina a cor do Fundo da página. O valor a ser entrado pode ser uma constante (nome em inglês da cor) ou um número hexadecimal (#xxxxxx) correspondente aos valores RGB da cor.
Exemplo:
<BODY BGCOLOR="red"> ou <BODY BGCOLOR="#996633">
BACKGROUND
<BODY BACKGROUND="URL DA IMAGEM">
Determina a imagem utilizada para preencher o fundo da tela. É importante observar se o endereço da imagem está correto. A imagem escolhida como fundo da página ocupará toda a região da tela, ou seja, mesmo sendo uma imagem pequena, esta será repetida por toda a página, cobrindo toda a extensão.
É possível tirar proveito do fato de que a imagem de fundo de um arquivo pequeno e de carregamento leve. Que ao ser repetido, comporá o fundo desejado. Isso é muito útil caso você queira um fundo degradê. Exemplo:
<BODY BACKGROUND="fundo.gif"> ou <BODY BACKGROUND="fundo.jpg">
Dica 1: Com CSS você pode escolher se a imagem de fundo irá repetir ou não, assim como centralizar a imagem no fundo, rolar automaticamente e muitas outras opções. Caso haja interesse em aprender CSS entre em contato comigo pelo email rafael_dmello@hotmail.com ou pelo whatsapp 15988191611
Dica 2: Para usar imagens que estão hospedadas em algum servidor basta inserir o endereço completo da imagem no lugar do valor da imagem. Exemplo:
Dica 2: Para usar imagens que estão hospedadas em algum servidor basta inserir o endereço completo da imagem no lugar do valor da imagem. Exemplo:
<BODY BACKGROUND="http://www.seusite.com.br/imagens/fundo1.jpg">
Escolhendo cores padrão para os texto e para os Links
<BODY TEXT="cor" LINK="cor" VLINK="cor" ALINK="cor">
Esses atributos determinam as cores para o texto geral da página (TEXT), Links não visitados (LINK), Links já visitados (VLINK) e o Link no momento que ele é ativado (ALINK). As cores devem ser dadas preferêncialmente em valores hexadecimais.
Exemplo:
<BODY BGCOLOR="#000000" LINK="#FFFF00" VLINK="#FF00FF" ALINK="#00FF00">
Embora não seja necessário mudar estas cores, existem casos onde a alteração das cores dos Links da página acaba sendo necessária, como, por exemplo, se o fundo da página for azul. Abaixo veja uma tabela mostrando as cores junto com os números hexadecimais mais utilizados na web:
Conclusão
Espero que tenha gostado deste primeiro artigo dessa série que visa te deixar apto a criar e gerenciar seus anúncios, sem ser necessário um profissional. Para qualquer dúvida entre em contato comentando abaixo. Um abraço e até a próxima.
Oi Rafa, preciso aprender tudo isso aff!!! embora eu não seja uma expert nessa área, achei suas explicações fáceis de entender. Como agora vou precisar ficar só em São Paulo, tenho que aprender mais, visto que vou ter que trabalhar em casa...conto com sua ajuda! rs
ResponderExcluirAbraço
Prima Márcia.
Boa tarde Márcia! Que bom que está acompanhando o blog. Todas as sugestões são bem vindas e se tiver qualquer dúvida pode comentar. Abraço!
ExcluirEstou adorando cada dica sua ;)
ResponderExcluirOlá Morgana, me desculpe pela demora no retorno. Que bom que está gostando. Qualquer dúvida estou à disposição.
Excluir