Jump to content
×
×
  • Create New...

Professor RGB Ensina Código HTML #01 - Utilizando Imagens


Recommended Posts

 

E aí, gente!

 

Tudo bem com vocês? Estão usando máscara e seguindo as normas de higiene tudo certinho? Ah, e espero que também estejam bebendo bastante refri água para hidratar seus belos corpinhos!

 

Como eu não sou uma pessoa muito ocupada nessa vida (na quarentena ou não... haha), resolvi criar este tópico com o bom senso de compartilhar o conhecimento que tenho sobre HTML a vocês.

 

Muita gente acredita que fuçar com códigos desse tipo é um tanto complicado e só vai conseguir ter dor de cabeça, o que de certo modo não deixa de ser verdade, mas antes que criemos pânicos, estou aqui para mostrar — ou pelo menos, tentar — que isso não se encaixa em alguns casos. E quando pega o jeito da coisa, passa até gostar de usá-los.

 

Fiquei pensando o que poderia ser legal e pratico para trazer como um primeiro tutorial aqui e, no final, cheguei a conclusão que mexer com imagens se adequava no conceito de ambas as palavras. Então, sem mais delongas, vamos começar!

Professor RGB ensina Código HTML #01

Aula de Hoje:
Utilizando Imagens

Antes de mais nada, gostaria de dizer que há várias maneiras de como você pode usar uma imagem no HTML, porém neste tópico estarei ensinando somente algumas maneiras de se fazer isso, sendo elas as mais básicas.

 

OBS.: Todos os * devem ser removidos na utilização dos códigos.

OBS. 2: Para se usufruir dos códigos aqui no fórum Union, habilite a aba Código-Fonte.

Modo .0
A Base

Vamos começar com o código que permite que a imagem apareça nas telinhas do pessoal, sendo também a partir dele que estaremos realizando os outros modos que virão a seguir.
 
Este é o exemplo utilizando o código abaixo.
<*div style="width: 150px; height: 150px; background-image: url(LINKDAIMAGEM);"><*/div>
Para entender um pouco melhor o código, aqui vai uma pequena explicação: width seria a largura da imagem e height seria a sua altura, essas proporções são medidas em pixels e você pode está alterando os valores de acordo com a imagem que esteja utilizando.

Modo .1
Preto & Branco

Dando continuidade ao tutorial, esta é a primeira maneira que lhes apresento que "editará" as cores da imagem, facilitando um pouco quando você deseja um filtro preto e branco, dando uma opção além de abrir um programa para conseguir a edição.
 
Este é o exemplo utilizando o código abaixo.
<*div style="width: 150px; height: 150px; background-image: url(LINKDAIMAGEM); filter: grayscale(100%);"><*/div>
Se você prestar atenção, foi necessário adicionar somente mais um elemento ao código. O grayscale regula a saturação das cores e para mudar a preferencia basta apenas trocar a porcentagem dentro dos parenteses.
 
Nesta imagem o filtro está em 80%.

Modo .2
Transparência

Esta é a segunda maneira de editar sua imagem apenas adicionando outro elemento ao código base, mas ao invés de mudar as cores, este estará alterando a transparência da imagem.
 
Este é o exemplo utilizando o código abaixo.
<*div style="width: 150px; height: 150px; background-image: url(LINKDAIMAGEM); opacity: 0.3;"><*/div>
O elemento da vez é o opacity, o seu valor vai de 0 à 1 (pois é, tudo para complicar a nossa cabeça). Contudo, há uma logica aí. Pense no número 1 como 100, ou seja, sua imagem 100% visível aos olhos humanos e o número 0 como... bem, zero. Dã...! No exemplo acima coloquei o valor como 0.3, deixando a imagem 30% visível.
E é com essas três lições básicas que termino o tutorial de hoje. Peço a vocês que deixem seu feedback nos comentários, dando sugestões e críticas para os próximos tutoriais. Caso haja alguma dúvida, comente ela também e, se estiver no meu alcance, estarei respondendo com prazer.

 

Edited by RGB
 
Link to post
Share on other sites
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

E aí, gente!   Tudo bem com vocês? Estão usando máscara e seguindo as normas de higiene tudo certinho? Ah, e espero que também estejam bebendo bastante refri água para hidratar seus belos corpinhos!   Como eu não sou uma pessoa muito ocupada nessa vida (na quarentena ou não... haha), resolvi criar este tópico com o bom senso de compartilhar o conhecimento que tenho sobre HTML a vocês.   Muita gente acredita que fuçar com códigos d

Como assim esperando nada em troca? Passa a coxinha aí!! haha Brincadeiras a parte, eu sempre gostei de elaborar tutoriais de algum assunto que entendo, mesmo não tendo um conhecimento aprofundado.   E obrigado pelos parabéns!

Disponha. Um dia seria um prazer pagar-lhe um cafezinho ou coxinha. Conhecimento é poder e as pessoas não estão dispostas a ofertar seus tesouros a outras pessoas.

7 minutos atrás, IACOOBVS KAIZEN disse:

Parabéns pelo tutorial. Ensinar algo sem nada em troca além da própria satisfação pessoal é algo cada vez mais raro.

 

Como assim esperando nada em troca? Passa a coxinha aí!! haha

Brincadeiras a parte, eu sempre gostei de elaborar tutoriais de algum assunto que entendo, mesmo não tendo um conhecimento aprofundado.

 

E obrigado pelos parabéns! <3

 
Link to post
Share on other sites
59 minutos atrás, RGB disse:

 

Como assim esperando nada em troca? Passa a coxinha aí!! haha

Brincadeiras a parte, eu sempre gostei de elaborar tutoriais de algum assunto que entendo, mesmo não tendo um conhecimento aprofundado.

 

E obrigado pelos parabéns! <3

Disponha. Um dia seria um prazer pagar-lhe um cafezinho ou coxinha. Conhecimento é poder e as pessoas não estão dispostas a ofertar seus tesouros a outras pessoas.

Rash-Menacing-Amethystinepython.gif

Link to post
Share on other sites

Assim como o Kaizen, também acho algo maravilhoso, é muito mesquinho guardar o conhecimento só para si, entendo que é algo valioso e pessoas ganham a vida com isso, mas é triste tentar fazer parte de um ramo onde não se acha nada esclarecedor. Falo isso principalmente pela área de artes no Brasil, pois parece algo inatingível, para poucos e não sabemos o que aqueles que conseguiram precisaram fazer para chegar lá, é como se fosse uma exclusão a menos que você ja tenha contado com isso desde de muito cedo.

Felizmente com a intenert há muitas pessoas dispostas a passar o que sabem para outros e que na maioria das vezes são as pessoas que em algum momento estiveram desse lado também, no escuro e sem saber para onde ir o que fazer.

Mas enfim, tirando as minhas tagarelices, o tutorial ficou ótimo! Não sabia que dava pra fazer essas alterações na imagem, sempre tive dificuldade com isso, tentei criar alguns pequenos layouts de sites utilizando html e css e nunca davam certo (e mesmo na faculdade, minha calculadora nunca funcionou tambem hahahahah), enfim, muito útil! Obrigada pela explicação!

Só uma observação, acho que a opção do código-fonte não aparece para todos os users, mas depende da mask.

 

 

 

Visitem minha galeria:

 Art&Manhas da Tristah

 

 

Link to post
Share on other sites
Em 16/10/2020 at 0:04 PM, IACOOBVS KAIZEN disse:

Disponha. Um dia seria um prazer pagar-lhe um cafezinho ou coxinha. Conhecimento é poder e as pessoas não estão dispostas a ofertar seus tesouros a outras pessoas.

 

Haha... Vamos fazer assim, você paga a coxinha e eu o cafézinho.

 

23 horas atrás, Tristah disse:

Assim como o Kaizen, também acho algo maravilhoso, é muito mesquinho guardar o conhecimento só para si, entendo que é algo valioso e pessoas ganham a vida com isso, mas é triste tentar fazer parte de um ramo onde não se acha nada esclarecedor. Falo isso principalmente pela área de artes no Brasil, pois parece algo inatingível, para poucos e não sabemos o que aqueles que conseguiram precisaram fazer para chegar lá, é como se fosse uma exclusão a menos que você ja tenha contado com isso desde de muito cedo.

Felizmente com a intenert há muitas pessoas dispostas a passar o que sabem para outros e que na maioria das vezes são as pessoas que em algum momento estiveram desse lado também, no escuro e sem saber para onde ir o que fazer.

Mas enfim, tirando as minhas tagarelices, o tutorial ficou ótimo! Não sabia que dava pra fazer essas alterações na imagem, sempre tive dificuldade com isso, tentei criar alguns pequenos layouts de sites utilizando html e css e nunca davam certo (e mesmo na faculdade, minha calculadora nunca funcionou tambem hahahahah), enfim, muito útil! Obrigada pela explicação!

Só uma observação, acho que a opção do código-fonte não aparece para todos os users, mas depende da mask.

 

Certamente, mas felizmente tem muita gente na internet que esta disposta a ajudar o próximo e isso é incrível. Eu tento fazer a minha parte. haha

Essas alterações ainda existe bastante, tanto para imagens, texto e afins, é bem bacana as coisas que se pode fazer com HTML. E obrigado!

 

Que bad essa do código-fonte, mas espero que ninguém tenha esse problema aqui.

 
Link to post
Share on other sites
Em 17/10/2020 em 19:47, RGB disse:

 

Haha... Vamos fazer assim, você paga a coxinha e eu o cafézinho.

 

 

Certamente, mas felizmente tem muita gente na internet que esta disposta a ajudar o próximo e isso é incrível. Eu tento fazer a minha parte. haha

Essas alterações ainda existe bastante, tanto para imagens, texto e afins, é bem bacana as coisas que se pode fazer com HTML. E obrigado!

 

Que bad essa do código-fonte, mas espero que ninguém tenha esse problema aqui.

 

Então, até tentei colocar pra todo mundo quando estava na staff, o Kadso, acho que era ele, disse que facilitava a edição de algumas coisas nos RPGs, mas infelizmente não deu certo. Não sei como esta com essa novatualização, podia ter ficado para todos.

 

 

Visitem minha galeria:

 Art&Manhas da Tristah

 

 

Link to post
Share on other sites
Em 21/10/2020 em 11:09, Tristah disse:

Então, até tentei colocar pra todo mundo quando estava na staff, o Kadso, acho que era ele, disse que facilitava a edição de algumas coisas nos RPGs, mas infelizmente não deu certo. Não sei como esta com essa novatualização, podia ter ficado para todos.

 

Poxa, é realmente uma pena.

Mas agora que o fórum teve o tema atualizado acho que esse problema já não existe mais, espero, pois pretendo está trazendo mais tutoriais do tipo.

 

Desculpa a demora para responder, acabei ignorando acidentalmente. =/

 
Link to post
Share on other sites
Em 25/10/2020 em 01:39, RGB disse:

 

Poxa, é realmente uma pena.

Mas agora que o fórum teve o tema atualizado acho que esse problema já não existe mais, espero, pois pretendo está trazendo mais tutoriais do tipo.

 

Desculpa a demora para responder, acabei ignorando acidentalmente. =/

 

Sem problemas!

Espero que sim, mas de qualquer forma da pra fazer também no bloco de notas como antigamente.

Poderia até acrescentar uma parte do tutorial explicando como que salva pra funcionar e tal pra quem nunca fez.

 

 

 

Visitem minha galeria:

 Art&Manhas da Tristah

 

 

Link to post
Share on other sites
Em 26/10/2020 em 08:50, Tristah disse:

 

Sem problemas!

Espero que sim, mas de qualquer forma da pra fazer também no bloco de notas como antigamente.

Poderia até acrescentar uma parte do tutorial explicando como que salva pra funcionar e tal pra quem nunca fez.

 

 

Opa, vou colocar isso nos próximos. Valeu pela dica!

 
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By Biano
      HOJE VOU ESTAR ENSINANDO COMO ADICIONAR IMAGENS NOS SEUS TÓPICOS !
       
      1° Criem uma conta no Imgur, depois faça upload da sua imagem no site.
       

       
      Depois que adicionada a imagem, clique nela e vai aparecer algumas opções.
      Clique em "Copy" na segunda opção
       
      ]
       
      Depois que o Link estiver copiado, vai ate seu tópico e clique em "Insert other media"
       
      Vai aparecer duas opções, clique na segunda :
       

       
      Depois vai aparecer isso "
      Insert image from URL
       
      Coloque o Link e  clique em "Insert into post"

       
      Pronto ! A Imagem foi Adicionada no Tópico !
       
       
      F  I  M  -  Biano Union Fórum !
       

    • By Zinho
      Pessoal deixando aqui uns vídeos e um tutorial que pode ajudar vocês a melhorar ou mesmo a começar a desenhar.
       
      Tutorial 1
       
      Canal de Bruno Santana no Youtube com óptimas dicas e sugestões.
       
      https://www.youtube.com/watch?v=FYK52Rd19c0
       
      https://www.youtube.com/watch?v=OBurKqmWTGA
       
       
      [warning]Podem também colocar outros tutorias, dar dicas ou ajudar membros que precisem de ajuda.[/warning]
    • By IACOOBVS KAIZEN
      Este tópico é voltado para postagens de quadros/telas e fotografias como forma de disseminar a arte visual. Postem telas e fotos de sua preferência, autorais ou de terceiros.
       
    • By RGB
      Depois de saber que, regra geral, colocar o objeto no centro da fotografia nem sempre é o ideal, e que deve usar a regra dos terços – depois da regra dos terços, vem um detalhe maior: o rácio de Fibonacci. Tal como tudo, a regra dos terços funciona em alguns casos, e é uma ótima ajuda, mas se conhecer e dominar o rácio de Fibonaci na fotografia, verá que nunca olhará para uma fotografia da mesma forma.
       
      O que é o rácio de Fibonacci?

      O rácio de Fibonacci foi descoberto por Leonardo Fibonacci por volta do ano 1200, sendo também conhecido como a proporção divina ou número de ouro. Fibonacci apercebeu-se que existia um rácio matemático absoluto que surgia muitas vezes na natureza, uma espécie de ordem universal que desenha a natureza e que a faz ao olho humano, natural e bela. Desde a Renascença que pintores, escultores e arquitetos baseiam as suas obras neste rácio.
       
      A proporção divina pode-se ver em obras famosas como a Mona Lisa ou a Última Ceia, obras de Leonardo da Vinci; hoje em dia até a Apple usa esta proporção em muito do seu design, sendo também usada por muitas empresas de design um pouco por todo o mundo. Embora a regra dos terços seja muito mais fácil de usar, o rácio de Fibonacci pode ser um grande trunfo, se o compreender bem. Por exemplo, em alguns programas de fotografia como Lightroom, existe um overlay que lhe permite fazer um crop à imagem de acordo com esta proporção. Com esta referência conseguirá que esta proporção coincida com as linhas ou pontos de interesse na sua fotografia.
       
      Mais concretamente, a Sequência de Fibonacci consiste numa sucessão de números, tais que, definindo os dois primeiros da sequência como 0 e 1, os números seguintes serão obtidos por meio da soma dos seus dois antecessores. Portanto, os números são: 0,1,1,2,3,5,8,13,21,34,55,89,144,233,...
       
      Dessa sequência, extrai-se o número transcendental conhecido como número de ouro também conhecido matematicamente como Phi (1,618).
       
      O número de ouro é aproximado pela divisão do enésimo termo da Série de Fibonacci (1,1,2,3,5,8,13,21,34,55,89,..., na qual cada número é a soma dos dois números imediatamente anteriores na própria série) pelo termo anterior. Essa divisão converge para o número áureo conforme a tornamos cada vez maior.
       
      Essa sequência aparece na natureza, no DNA, no comportamento da refração da luz, nos átomos, nas vibrações sonoras, no crescimento das plantas, nas espirais das galáxias, nos marfins de elefantes, nas ondas no oceano, furacões, etc.
       
      Aplicar a proporção divina à fotografia pode fazer com que uma fotografia seja algo que uma pessoa considere agradável à vista, sem saber bem porquê; na realidade o subconsciente humano deteta este rácio inconscientemente.
       
      Aplicação nas fotografias
       
      Para aplicar o rácio de Fibonnaci a uma fotografia, basta aplicar o que é semelhante à regra dos terços: uma grelha dividida em 3 partes. A diferença é que em vez de ter a grelha dividida em 3 partes iguais, a grelha que divide a fotografia em 3 partes não se divide em 3 partes iguais divide-se em: 1+ 0,618 + 1.
       

       
      Nestes casos o ponto dominante está no olhar pois encontra-se numa das intersecções de Phi.
       

       
      Se ainda quiser ir mais longe, pode optar por aplicar o rácio por inteiro à imagem e ainda conseguir um detalhe maior. Nesta imagem, dá para perceber que existe uma ligeira diferença entre as intersecções das linhas Phi e o local perfeito de Phi. Nesta imagem o centro da face está alinhado pela espiral e o olhar posicionado no ponto mais próximo da Phi.
       

       
      Neste caso, em vez de se optar por colocar a linha terrestre de acordo com a regra dos terços, esta foi mudada para a linha Phi inferior; colocou-se também o olhar do coelho mesmo na junção das linhas de Phi. Este é um bom exemplo de como se pode obter uma fotografia diferente, na realidade menos previsível.
       
      O rácio de Fibonacci é uma excelente ferramenta na composição de uma fotografia, ajuda muito a criar fotografias mais originais, e torna uma fotografia muito diferente do que quando se utiliza a regra dos terços; aliás esta não deve nunca ser vista como uma pequena variante da regra dos terços, porque na realidade a diferença é muito grande. Esta é a grande diferença que faz com que se consiga uma fotografia que naturalmente se gosta.
       
       
      Tutorial sugerido por @Heladio-F.
  • Recently Browsing   0 members

    No registered users viewing this page.