cancelar
Showing results for 
Search instead for 
Do you mean 

⬜ [GUIA] Editando Imagens por HTML! XD

Highlighted
Dragão

⬜ [GUIA] Editando Imagens por HTML! XD

 

Oia eu aqui denovoo! YAAAYYYY

"Dois tópicos em menos de 168 horas?? OMG"

Pois é, pois é, agora shhhhh (~˘▾˘)~

Vamos começar, silêncio, e foco total!

 

Vou dar continuação ao tópico sobre o Guia do Fórum, dessa vez abordando o assunto HTML!

Não vou mentir, é chatinho, mas é igual andar de bicicleta xD

 

BORA COMEÇAR sa BAGAÇA!

 

Só um adendo, estou sem meu PC ;-;

Então se tiver algo fora de ordem, peço perdão pelo vacilo..

Estou num Notebook e a resolução atrapalha na hora de organizar tudo!

 

HTML nada mais é que uns código doido que você coloca nos site e eles moldam o site vey.. Basicamente..

ou

É uma linguagem de marcação, utilizado pra estruturar um website, você posiciona cada coisa onde vocês quiser, e aqui no fórum não é diferente (bom, mais ou menos, pois estamos falando de tópicos e não criação de sites xD).

 

Eu acho bem divertido ficar mexendo porque dá pra fazer várias coisas legais, MAS NÃO VIM AQUI ENSINAR VOCÊ A MEXER COM HTML, somente a ensinar a usar o HTML pra criação e edição de imagens para posts por aqui.

Algumas pessoas já me perguntaram como faço pra posicionar minhas imagens por exemplo, colocar elas na Esquerda ou na Direita, colocar o texto do lado da imagem, etc..

 

           

 

 

         A verdade é que é bem 

                    simples!

       Ta vendo esses Amumus?

      São 4 imagens distintas xD

 

 

 

 

 

 

 

Se você tentar fazer isso ae provavelmente não vai conseguir, apenas se usar os códigos HTML pra manipular onde cada elemento vai..

 

 

Então, estão prontas crianças?

 

Primeiramente, o que vocês precisam saber?

Como todo código, precisamos iniciar o comando, no HTML usamos os símbolos "<" para Iniciar e ">" para Encerrar..

 

Por exemplo, pra iniciar um comando de imagem trabalhamos com o código "img", para parágrafo usamos "p", para colocar em negrito usamos "strong" e por ai vai.. Pra vocês aprenderem os comandos sugiro vocês usarem todos as opções de criação que eu apresentei no tópico anterior da seguinte forma:

 

 

Spoiler
Ola - normal
Ola - negrito
Ola - Itálico
Ola - Sublinhado
Ola - Riscado
E por ai vai até usar todos

Depois clica em HTML ao lado de "Texto" e "Visualizar" para pegar o comando de todos as formatações, ou você pode simplesmente pesquisar online também, vai saber ¯\_(ツ)_/¯


Como o foco vai ser imagens, como disse o código é "img"

E LEMBRE-SE, SEMPRE EM MINÚSCULO (apesar de ser irônico eu ter chamado a atenção em maiúsculo e.e)

 

Vamos dar inicio à linha:

<img

 

Você quer colocar uma imagem do seu imgur, então vai lá no seu imgur, pega o Direct Link e dá um Ctrl + C.

Continuando a linha, seu comando para imagem vai ser "src", significa Source ou Origem:

<img src

 

Qual é a Origem da sua imagem? É o link que você copiou, então você vai dizer pro seu comando que a Origem é o link:

<img src="o link que você copiou lá do imgur"

 

Não esqueça de SEMPRE pôr o link entre Aspas, para não confundir o comando.
Depois disso você encerrar o comando colocando um ">" no final.

<img src="o link que você copiou lá do imgur">

 

Pronto, seu comando de imagem está feito!

Ou você pode simplesmente clicar em "Inserir/editar imagem" nas opções (ノಠ益ಠ)ノ彡┻━┻

Mas sério, faz isso é bem mais prático, isso que eu expliquei é apenas pra você se familiarizar com a lógica envolvida!

 

Dito isso..

 

"Legal ana, mas minha imagem não está do tamanho que eu quero.."

 

- Vamos consertar isso então!

Quando você está criando um post, se você adiciona uma imagem no "Corpo", clicando em cima dela você pode arrastar os cantos das bordas para aumentar ou diminuir a imagem, mas se você quer distorcer ela, colocar em dimensões que você escolher, então você vai precisar mexer no HTML..

 

Vocês vão adicionar novos comandos na linha, os comando são "width" e "height", que são Largura e Altura.

 

Me acompanhem!

 

Depois do comando Origem (src), assim que você fechar as Aspas você pode dar um espaço e continuar o comando:

<img src="o link que você copiou lá do imgur" width="Largura" height"Altura">

 

Pronto, agora, agora a imagem está nas dimensões que você quiser!

 

OBS: As dimensões são medidas em Pixels, não em Centímetros ou Polegadas xD

 

"ANNNNNAAAAAAAAAAAA, QUERO COLOCAR A IMAGEM DO LADO DIREITO!11!!"

 

- Calma cara, oshe!

 

Agora vamos aprender a Alinhar sua imagem, o comando é literalmente esse, "align".

Depois do Width e Height você pode criar outro comando, da mesma forma, dá um espaço e digite o comando:

<img src="o link que você copiou lá do imgur" width="Altura" height="Largura" align="Posição">

 

 

As posições são "left" que é Esquerda e "right" que é Direita..

 

"Ana, porque Esquerda se quando coloca a imagem ela já fica na esquerda?"

 

- Porque ela fica na Esquerda porém ela ocupa TODO o espaço que ela pertence na linha..

Percebe que quando você coloca a imagem, o sinalizador de texto (essa coisinha piscando na tela indicando que você pode escrever) fica gigante? É como se você tivesse escrevendo alguma palavra com a fonte do tamanho 2000 ou sei lá..

 

Enfim, alinhando ela na Esquerda, ela ocupa o tamanho de um Texto do tamanho normal, aliado a isso, você será permitido escrever do lado da imagem! YAAAYYY ♪~ ᕕ(ᐛ)ᕗ

 

"Tendi ana, mas decidi que quero centralizar minha imagem, não quero dexar ela no canto :T"

 

- Caramba, mas você é muito indeciso.. Posso te ajudar nisso também..

 

"Hmm, Left é esquerda, Right é direita.. então Center é centro! É só colocar center lá, né?? Sou mt inteligente hahahahaha"

 

- Então né, lógica apurada! Parabéns!! Mas está incorreto! hahahahaha

 

Pra você centralizar a imagem, você terá que centralizar o comando todo, ou seja, criar outro comando além do "src", como vamos fazer isso?

Muito simples:

 

O que queremos centralizar? A imagem! Então basta centralizar o comando da imagem! WOOOW

 

Então vamos criar outro comando, "center"..

 

Vamos dizer que o comando precisa de uma Entrada e Saída, tudo que estiver entre vai ser centralizado, por isso você não "alinha", todo o elemento vai ser centralizado, e cabe a você escolher o que quer que seja:

<center><img src="o link que você copiou lá do imgur" width="Altura" height="Largura" 
align="Posição"></center>

Observem que eu coloquei todo o elemento da imagem entre o comando "center", e que no final o comando é diferente por conta da "/", isso da por entender que é a Saída para o comando, para não confundir a linha ^^

 

Edit: Adição do comando Centralizar

 

Eu acredito que seja isso.. ;/

Se eu lembrar de mais alguma coisa (ou vocês me lembrem ae xD) eu venho e atualizo pra não ter dúvidas..

 

 

Obrigado pra quem leu até aqui!

Espero que tenha sanado suas dúvidas, se não, me pergunte aqui embaixo que irei responder com o maior prazer!

Breve lançarei outro Guia pra ajudar vocês xD

E obrigado ao Mod que me ajudou hoje cedo kkk (づ。◕‿‿◕。)づ

Enfim..

 



16 RESPOSTAS
Aronguejo

Re: ⬜ [GUIA] Editando Imagens por HTML! XD

Ótimo post, quem dera pudesse usar CSS aqui :/
Dragão

Re: ⬜ [GUIA] Editando Imagens por HTML! XD

<img src="http://i.imgur.com/pb18o73.jpg" align="left"> funciona mesmo?
Essa parte não pertence a este comentário. Não se sabe ao certo porque ela está aqui, mas não importa.
Dragão

Re: ⬜ [GUIA] Editando Imagens por HTML! XD

Opa algo deu errado aqui.
Essa parte não pertence a este comentário. Não se sabe ao certo porque ela está aqui, mas não importa.
Aronguejo

Re: ⬜ [GUIA] Editando Imagens por HTML! XD


@osmarpena  escreveu:
<img src="http://i.imgur.com/pb18o73.jpg" align="left"> funciona mesmo?

何?! acredito que seja pq HTML assim n entra mesmo

Dragão

Re: ⬜ [GUIA] Editando Imagens por HTML! XD

??? Oq tem errado?
Essa parte não pertence a este comentário. Não se sabe ao certo porque ela está aqui, mas não importa.
Aronguejo

Re: ⬜ [GUIA] Editando Imagens por HTML! XD


@osmarpena  escreveu:
??? Oq tem errado?

No HTML? Nada. mas digitar HTML nessa caixa de texto n funciona

Dragão

Re: ⬜ [GUIA] Editando Imagens por HTML! XD

@osmarpena 

Provavelmente você utilizou o código na aba "Texto" e não "HTML"

 

 

 

 

 

 

@Maria Takeuchi 

Sim, CSS é bem dahora de se mexer xD, Mango disse que estão estudando adicionar no fórum..


Re: ⬜ [GUIA] Editando Imagens por HTML! XD

Rex tremendae majestatis
Qui salvandos salvas gratis
Salve me, fons pietatis
Salve me, fons pietatis
Lenda

Re: ⬜ [GUIA] Editando Imagens por HTML! XD

Bom ver q vc esta ativo novamente no fórum como em 2018.
Aronguejo

Re: ⬜ [GUIA] Editando Imagens por HTML! XD


@ana Iuiza  escreveu:

@osmarpena 

Provavelmente você utilizou o código na aba "Texto" e não "HTML"

 

 

 

 

 

 

@Maria Takeuchi 

Sim, CSS é bem dahora de se mexer xD, Mango disse que estão estudando adicionar no fórum..


Eu achei q essa função era só pra ilustrar o HTML, da pra usar rotação na imagem tbm?

Dragão

Re: ⬜ [GUIA] Editando Imagens por HTML! XD

@trollface rules 

OMG, é VERDADE!

Já está atualizado, perdão :c

 

@Draicker 

Essa é a intenção xD

Vamos ver como vai se desenrolar..

 

@Maria Takeuchi 

Rotação tipo, rodar? xD

Não sei.. vou testar agora!


Dragão

Re: ⬜ [GUIA] Editando Imagens por HTML! XD

@Maria Takeuchi 

Tentei aqui mas parece que, realmente, sem CSS fica complicado shuaheuhs


Aronguejo

Re: ⬜ [GUIA] Editando Imagens por HTML! XD


@ana Iuiza  escreveu:

@Maria Takeuchi 

Tentei aqui mas parece que, realmente, sem CSS fica complicado shuaheuhs


#LIBERACSSRITO

Re: ⬜ [GUIA] Editando Imagens por HTML! XD

Meu deus, mas que delícia de post ╰། ◉ ◯ ◉ །╯
Dragão

Re: ⬜ [GUIA] Editando Imagens por HTML! XD

@Mahtan Inglorion 

Dlç é vc bb

q