Baú da Dri um blog descontraído com receitas diversas , casa e astral , dicas e personalizações para blogs , brindes ,artesanato decorativas , porcelanas e muito mais!

21 de outubro de 2019

Códigos html e css Fáceis para você Aprender


Bom dia amigos leitores.
Espero que tenham tido um ótimo final de semana!
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?


códigos html e css fáceis de 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 gaget html.

 Para alterar o tamanho da fonte  , o numero 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

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 numero 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 varias tonalidade (seus códigos) , vá :

Paletas de cores 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 ajudem o Baú da Dri a crescer.

Nenhum comentário:

Postar um comentário

Gostou do Post , deixe seu comentário e sugestões .
Em breve responderei a todos.

Copyright © Blog de Variedades Baú da Dri Design by Adriana Bentim | Tecnologia do Blogger