Receba todas as novidades em 2021.

    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.

    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