Códigos html e css fáceis e úteis para você aprender

em 18/03/2021

Tempo de leitura:


  • Vamos falar um pouco sobre códigos, hoje eu venho trazendo um pouco de esclarecimento para quem está começando e ainda não se sente familiarizado com HTML e CSS.

  • Muitas vezes olhamos e pensamos, hunn  para que será que serve onde posso mexer?

  • Quando você conhece pelo menos o básico dos códigos HTML e CSS, é muito mais confortável fazer alterações.


  • HTML (Hyper Text Markup Language), é a linguagem usada para criar páginas da web. 
  • O modelo / tema de um blog é composto por uma página inteira de codificação HTML.


  • Se você deseja ter mais controle sobre o que você adiciona ao seu blog e onde deseja, aprender alguns códigos HTML básicos é a melhor ideia.

  • Dessa forma você passa a entender melhor onde pode fazer modificações dentro do seu template.

  • Para dar estilo aos Gadgets, e ao próprio tema do seu blog, como cores, fontes, linhas, faixas, efeitos gradientes, hover entre outro o responsável por isso é o CSS (Cascading Style Sheets), folha de estilo que se encontra na tag de fechamento skin.


  • Hoje eu venho trazendo alguns códigos fáceis e úteis para vocês fazerem modificações em seu blog.


Códigos html e css fáceis e úteis para você aprender



  • Vamos aos códigos:


  • Para inserir imagens você sempre usará, essa primeira linha, lembrando que poderá, hospeda-la no seu próprio blog.

  • O segundo é usado em imagem com link (aquela que quando você clica na imagem abre um link), temos duas opções, abrir o link na mesma janela ou abrir em outra janela.


<img src=" link da sua imagem">

<a href="link do site"><img src="link da imagem"></a>

<a href="url do link"target="_blank"><img title="frase"alt="nome"src"url da imagem"/></a>


  • Aqui você pode incluir link de texto: 


  • <a href="link do site">texto aqui</>


  • Texto em: 


  • Negrito <b>texto </b> 
  • Itálico <i>texto </i> 
  • Sublinhado <u>texto</u>


  • Agora vamos ao destaque personalizado:


<span style="background:#ffffff;boder-radius:6px;padding:6px;">trecho em destaque</span>


  • Para usar na página de texto  você deve colocar o editor em HTML e inserir, ou antes, de escrever a postagem, ou depois.


  • Você também pode, usa-los em Gadget, HTML\JAVASCRIPT.


  • Os rótulos HTML são conhecidos como Tags que se iniciam com os sinais:


  • menor < e maior > , com exceção as Tags nulas todas possuem  o seu fechamento com a \, ficando < abertura \> fechamento.

  •  Para alterar o tamanho da fonte, o número pode ser substituídos por maiores.

  • <font size="4">texto</font>


  • Identificando a fonte que vem assim:  font-family;'Arial';

  • Para dar estilo a fonte:


  • font-style:'Pacifico';


  • Para alinhar textos:


  • text-align:center; centro
  • text-align:left; esquerda
  • text-align;right; direita
  • text-align:justify; justificado


  • Para adicionar negrito, use:


  • font-weght:peso da fonte de claro a negrito a numeração muda a espessura em negrito da fonte quanto maior mais forte;
  • font-variante:bold;


  • Para adicionar sombra, use:


  • text-shadow 1px 2px 3px #ffffff; 


  • Teste com o tamanho da sombra que é o px e a cor que você escolher.

  • Tamanhos da fonte podem ser:


  • font-size:12px - em  pixel-px ;
  • ou
  • font-size:120% - em porcentagem 


  • Podemos também inserir;


  • text-decoration: 
  • Underline-sublinhado
  • Overline-sobrelinhado
  • line-through-riscado
  • none-sem comando
  • text-transform:


  • uppercase-maiúscula
  • lowercase-minúscula
  • capitalize-inicial maiúscula
  • none- sem comando


  • Ainda temos:


  • letter-spacing: que adiciona distância entre as letras em uma página.
  • line-height: altura vertical entre as linhas de texto.
  • word-spacing: tamanho do espaço entre cada palavra.


  • Quando nos deparamos com o "Float" que é a função que faz o elemento flutue para à:


  • right - direita | left - esquerda 
  • bottom - para baixo | top - posição do elemento em relação à parte superior da página.


  • Agora vamos ver as bordas que traçam as linhas nas quatro margens e podem ser 


  • None - nenhuma
  • Dotted - pontilhada
  • Solid - continua
  • Groove - entalhada
  • Ridge - ressaltada
  • Double - dupla


  • Quando usamos fica da seguinte forma:

  • border:dotted 4px; você pode aumentar ou diminuir o valor em pixel conforme achar melhor.

  • Para arredondar as bordas:


  • border-radius:6px; quanto maior o número de pixels, mas redondo ficará o elemento.

  • Para mudar, aumentar ou diminuir a largura usamos:
  • "width"

  • Para aumentar ou diminuir a altura:

  • "height"

  • Para ambos podemos definir o valor em pixels ou porcentagem.


  • Visibility - visible; deixa o elemento visível ou 
  • hidden; deixando elemento invisível


  • Vamos ver agora o uso do atributo "ALT"

  • O atributo "alt" deve ser inserido quando queremos que um texto apareça ao passarmos o mouse sobre a imagem, esse texto também aparecerá como texto descritivo quando a exibição da imagem não estiver ativa, deixando a tag assim:


  • <img src="imagem"alt"="texto descritivo">


  • Essa é a base agora podemos ir fazendo melhorias com os códigos já citado acima.


  • <img src="imagem"width"="200"height="200">


  • Acrescentando largura e altura.


  • Definindo um contorno a sua imagem:


  • <img src="imagem"border="5">


  • agora juntado tudo:


  • <img src="imagem"border="6"alt="descrição"width="120"height="120">


  • Criando um link para permitir aos visitantes enviarem um e-mail, usamos a função "malito" na tag de link.


  • <a href="malito:seu e-mail"> Enviar um e-mail</a>


  • CSS link


  • a:link são os links ativos;
  • a:visited links que já foram visitados;
  • a:hover forma em que o link aparece ao passar o mouse.

  • Z-index:

  • Posiciona o elemento mais próximo ou afastado da página usamos o código assim:
  • z-index:99; até z-index:9999;

  • Uma personalização fácil e útil para você instalar em seu tema são as dos títulos, subtítulos das postagens, além de diferenciar uns dos outros também é muito útil para a finalidade de SEO.


  • Confira os códigos abaixo, instale acima do fechamento da Tag ]]></b:skin> de preferência abaixo do fechamento h3.post-title a {:


 
.post-body h2 { 
color:#292e33; /* edite cor da fonte */font-family: Corsiva;/*tipo da fonte*/font-size: 26px;  /* edite tamanho da fonte */
}
.post-body h3 {  
color: #7bb3ad; /* edite cor da fonte */font-family: Corsiva;/*tipo de fonte*/font-size: 24px;  /* edite tamanho da fonte */
}
.post-body h4 {  
 color:#bcd4d7; /* edite cor da fonte */font-family:Corsiva;/*tipo de fonte*/font-size: 18px;   /* edite tamanho da fonte */
}

  • Troque as cores e fontes pelas de sua preferência., estando tudo certo salve.

  • Bom por hoje é só, desejando uma personalização deixe nos comentários, assim que for possível publicarei.
  • Quer entender melhor onde pode usar cada código, confira nesses outros dois artigos tudo que você pode personalizar no seu tema:


 

  • Para consultar cores  para personalizar seu blog, fazer um design para suas redes sociais, entre outras coisas consulte a tabela de cores e também saiba como usar backgroud e grayscale.

  • Espero que gostem!  Curtam, compartilhem, comentem.

  • Desejando saber sobre mais códigos ou alguma personalização deixe seu pedido nos comentários abaixo que em breve atenderei.

Nenhum comentário , comente também!

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.