O dragãozinho traz textos de cultura pop, abordando temas como livro, filmes, séries e quadrinhos, além de alguns posts de assuntos diversos.

Fazendo um “Sobre mim” com HTML


Fazendo um Sobre Mim com HTML

Muitas pessoas utilizam plugins para colocar aquele “Sobre mim” na coluna lateral, mas a adição de plugins aumenta o tempo de carregamento do site, então é bom deixar só os essenciais mesmo. Por isso, fiz um post com algumas dicas para adicionar direto no HTML da página ou com o widget de texto. Além de ficar mais leve, vai ficar bem mais personalizável.

Como funciona

Vou colocar primeiro um exemplo de código pronto bem simples e genérico, e depois alguns atributos que podem ser usados para estilizar o texto como preferir, então recomento usar o exemplo como ponto de partida e ir alterando conforme precisar.

Exemplo:

<img src=”endereco-da-imagem.png” style=”border-radius:100px; width:200px; margin:0 auto;”>

<p style=”text-align:center; font-size:20px;”>Nome</p>

<p style=”text-align:justify;”>Textinho sobre mim</p>

Como modificar

Imagem

Primeiro, sobre a imagem, você pode definir a largura (a altura se adapta automaticamente) usando o width (já está no exemplo). O ideal é que você já coloque uma imagem do tamanho que deseja, para que o site não precise redimensionar ela.

Para deixar a borda arredondada, pode usar o border-radius. O valor dele é pixel, para definir o quão arredondada ela vai ser. Para deixar a imagem em um círculo, defina como 100px. Já está no exemplo também, assim como está ficara igual a foto do meu sobre mim (ali do ladinho). Se não quiser tão arredondada, é só diminuir o valor.

Para deixar centralizada, defina a margem como auto para as laterais, colocando “margin: 0 auto;” (como no exemplo). O primeiro valor, o 0, corresponde à margem vertical, então se você quiser dar espaçamento para cima ou para baixo da imagem, defina um valor ali. Para definir um valor diferente para cima e outro para baixo, você coloca quatro valores.

Exemplo:

margin: 10px auto 4px auto;

Sendo o primeiro valor o da margem de cima, o segundo da direita, o terceiro de baixo e o quarto da esquerda.

Texto

Para o texto, tem algumas modificações que dá para fazer. O text-align (que foi usado no exemplo) define o alinhamento do texto.

  • text-align:left; – para alinhar a esquerda
  • text-align:right; – para alinhar a direita
  • text-align: center; – para centralizar
  • text-align:justify; – para justificar

O font-weight server para deixar a fonte mais fina ou mais grossa, mas nem toda fonte suporta isso, então pode ser que não funcione.

  • font-weight:bold; – deixa o texto em negrito
  • font-weight:lighter; – deixa a fonte mais fininha
  • font-weight:normal; – volta ela pro normal

O font-size define o tamanho da fonte (já está no exemplo também).

O color serve para definir a cor da letra. Ele suporta algumas por nome, como black, white, red, blue, etc, mas pode colocar o código hexadecimal ou rgb também.

Exemplo:

color: black;

color: #ffffff;

E se quiser alterar só uma parte do texto, pode usar a tag <span>.

Exemplo:

<p> bla bla <span style=”color:red; font-weight:bold”>bla</span> bla bla</p>

Assim, o texto que estiver dentro do span vai ficar vermelho e em negrito, enquanto o resto vai estar normal.

Fundo

Para modificar o fundo, primeiro vai precisar adicionar uma div e colocar o style nela. Antes da tag <img> coloque assim:

<div style=””>

Aí é só colocar os elementos que precisar dentro das aspas. E depois de todo código, fecha ela com

</div>

Para alterar a cor do fundo, basta usar background-color com a cor desejada.

Exemplo:

background-color: white;

Se for colocar uma imagem, tem uma série de detalhezinhos pra arrumar ela.

O background-image define a imagem (tem que colocar aquele url e o link dentro dos parênteses)

background-image: url(link);

Para definir o tamanho da imagem, usa o background-size, então se ela estiver muito grande e aparecendo cortada, pode arrumar com ele.

background-size: 20px;

Por padrão, a imagem vai ficar repetindo várias vezes. Para tirar isso, é só colocar

background-repeat: no-repeat;

Para posicionar a imagem, usa o background-position. Ele vai receber dois valores, o primeiro vai ser a posição horizontal e a segunda a vertical. Pode usar valores como center, left, right, bottom, top ou colocar o valor em número, de acordo com a distância que deve ficar da borda.

Exemplos:

background-position: left top;

background-position: right 4px;

background-position: 1px center;

background-position: 2px 10px;

Se ficar com algum problema, você pode usar a função de inspecionar código para testar algumas alterações nele (muito útil se for definir a posição pra imagem de fundo, porque da pra ir testando os valores e já vendo o resultado na hora). Para usar, é só clicar com o botão direito em cima do elemento que quer ver e clicar em “Inspecionar”, vai abrir uma aba mostrando todo o HTML da página e o CSS referente a cada elemento.

Se alguém ficar com alguma dúvida, quiser fazer uma alteração que não foi abordada aqui, ou se deu errado e ficou tudo torto, é só deixar um comentário ou chamar no facebook que eu ajudo a arrumar! (ou tento)

 

Relacionados

Have any Question or Comment?

19 comments on “Fazendo um “Sobre mim” com HTML

dornelesbru

Faz tempo que eu estava tentando aprender algo sobre HTML, não é tão difícil quanto eu pensava!
Obrigada pelo post

Agora é tentar apanhar menos! hehehe

Beijo

https://belezaonduladablog.wordpress.com/

Reply
Simone Pinheiro

Tenta sim! Depois que pegar o jeito vai ver que é bem simples 😀

Reply

Simone que legal! Amei a dica!

Só uma dúvida, será que esse código funciona para aquilo que eu te perguntei?

Se não for assim (porque eu sou bem “leiga” nesse caso de layouts e códigos) você poderia por favor ensinar como colocar aquele código que você me passou? Para que eu possa colocar os ícones das redes sabe? Com imagem clicável, que nem esse banner do Bloglovin’ 🙂 please haha, desde já agradeço.

Amei a dica, está bem explicadinho, e sei que vai ajudar muita gente que precisar! Beijos, amei o novo visual do seu site, e parabéns pelo domínio! Eu te desejo muito sucesso nessa nova fase!

http://www.senhoritadeise.com

Reply
Simone Pinheiro

Muito obrigada! Fico feliz que tenha gostado ❤️

Quanto à imagem, é bem simples. Você coloca a tag da imagem () dentro de uma de link, e se quiser que ele abra em uma nova aba, é só colocar um “target:_blank”.

Coloquei o código de exemplo aqui: https://justpaste.it/wr04

Assim, quando clicar na imagem, vai carregar o link que estiver no “endereço-do-site.com”. Qualquer dúvida é só chamar 🙂

Reply

Olá, onde você hospeda suas imagens? 🙂 Tem algum site que você possa me indicar que seja gratuito? E, tem algum que você possa me indicar para achar ícones legais?
Beijos, desde já obrigada! Copiei aqui o código haha

Reply
Simone Pinheiro

Eu hospedo elas na própria biblioteca do wordpress, junto com as imagens dos posts, aí pego o link delas pra usar na lateral 😀 Quando aos ícones, tem esses dois sites aqui, só tem que cuidar a licença para uso:
https://www.iconfinder.com/
http://www.flaticon.com/

Reply

Esse post e de utilidade publica serio haha, to fazendo algumas mudanças no meu blog( ava mais uma hehe) e to curtindo aprender coisas novas de html, amo esse mundo,tudo que eu sei eu aprendi na internet ♥
ja salvei nos meus favoritos, com certeza vou pratica, beijos

Reply
Simone Pinheiro

Que bom que gostou! Espero que ele possa ser útil para você 🙂

Reply

Que.Demais! Iniciei no blog a 18 dias e nao sabia disso do carregamento! vou agora mesmo fazer pela html, valeu linda <3

Reply
Rayanne Buchweitz

Amo os tutoriais que fazem a nossa vida ainda mais fácil <3 Muito útil, com certeza vou usar!
Beijão

querosermiranda.blogspot.com.br

Reply
Simone Pinheiro

Que bom que gostou! Pretendo fazer para deixar a vida mais fácil ainda hahah

Reply
Luly

Em grande parte das vezes eu acabo usando HTML na sidebar. É o que você falou, existem 5mil plugins, mas pra que usar isso tudo e ficar travando? Sem contar que a gente tem mais liberdade de edição, né!

Reply

Simone, amei a dica.
o meu blog estava precisando de algo assim.
obrigadaaaa

Reply

Tenho muita facilidade com o html, por isso não sabia nem que existia um plugin para isso hahaha. Adorei o tutorial, super bem explicado. Muito útil para quem tá começando <3

Reply

Amei o tutorial. To precisando fazer umas mudanças no meu blog, então já vou guardar aqui nas minhas notas!
Forever XVI

Reply
Luciana de Andrade

Adoro essas dicas porque eu não entendo nada. Agora estou em busca de aprender o básico para editar vídeos, fui para no Sony Vegas e desisti, parti pro Movie Maker, agora seja o que Deus quiser. O que seria de nós sem vocês, que nos ensinam o que não sabemos? Nada! rsrs
Adoro suas dicas, tenho que tirar um dia só para praticar, ainda estou aprendo. bjs
http://www.pilateandosonhos.com

Reply

Adorei o post! Curto muito HTML, mas vira e mexe me dá um branco e esqueço alguns códigos, e tenho que correr pra internet pra lembrar. Seu post foi bem simples, claro e fácil de entender. Muito bom!! Beijos =)

Reply

Gostei muito do tutorial, vou favoritar aqui porque pode ser útil pra mim! 😉

Beijos

Reply

Adorei! Super completo teu post e bem fácill de entender, me tirou várias dúvidas.
Às vezes fico na dúvida de mexer em alguma coisa por não conhecer html e nem sempre os tutoriais são tão explicativos assim é só um copia e cola e rala pra encontrar de novo caso não dê certo ou queira modificar, né???
Ótimo post.

Um beijo.

Reply

Deixe uma resposta

%d blogueiros gostam disto: