21 outubro 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 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 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

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 , ela são muito importantes para fazer o blog cada vez melhor . Curta , compartilhe ,ajude o blog a crescer .
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Confira também outras postagens aqui do Baú da Dri