21 outubro 2019

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

🗨

Bom dia amigos leitores.


Hoje vamos falar um pouco de códigos. 

Sim códigos que quando estamos começando, 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 é 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.

Bora! Lá.



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





Então vamos aos códigos html e css fáceis para você aprender



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.


  1. <img src=" link da sua imagem">
  2. <a href="link do site"><img src="link da imagem"></a>
  3. <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 usa-los 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 exeçã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: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 pagina.

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.

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>

Para saber mais sobre o uso de cores (background), ver paletas sites com várias tonalidades (seus códigos), vá :

Paleta de cores e background para usar se Inspirar, Usar background sites incríveis para criar suas cores


Bom por hoje é só, desejando uma personalização deixe nos comentários, assim que for possível publicarei.

 Espero que gostem!  Curtam, compartilhem, comentem.

Depositphotos [CPS] WW

Nenhum comentário:

Postar um comentário

Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri. Gostou?! Deixe seu comentário, criticas e sugestões, elas são muito importantes para o blog crescer e melhorar. Curta, compartilhe, ajude o blog a crescer.
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Atualizações do Instagram