Códigos html e css fáceis e úteis para você aprender - Universo Blogueira Página não encontrada!Universo Blogueira

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

Publicado 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 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á, hospedá-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:

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Comente, críticas e sugestões, são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Inscreva-se e receba novidades.



Instagram | @blogueirauniverso