2 de fevereiro de 2017

Códigos básicos de HTML e outras ajudinhas


Olá, como vão?
 Há pouco tempo, eu participei de um projeto em um grupo no facebook, chamado "Blogueira Madrinha". Ele consistia em ajudar alguém inexperiente/novo na blogosfera ou então pedir ajuda com algo que tem dúvidas. Eu resolvi ajudar a Hanna do blog Mundinho da Hanna com o layout e outras coisinhas. E vi que tem muitas pessoas que não sabem uma coisa ou outra sobre html, então achei legal fazer uma postagem mostrando códigos básicos que dão forma a qualquer tipo de elemento que você queira construir, como um menu, a sidebar, área de comentários e etc. 
 Não sou nenhuma expert com isso, mas sei de uns truques simples que pode te ajudar na hora de criar seu próprio modelo de código para qualquer área do blog. E espalhar informação e conhecimento é sempre bom, não é mesmo? Quanto mais pessoas souberem melhor é.



 Vamos começar com as dicas iniciais. É importante que você faça seu código inteiro pelo bloco de notas, pois fica mais fácil de arrumar o que for preciso. Quando tudo estiver pronto cole seu código no html de um blog teste, para prevenir que está tudo certo e poder continuar com os ajustes sem perder ou desconfigurar nada do blog oficial.
 Vamos precisar de uma tabela de cores. Para usar a cor que escolheu você pode escolher entre o nome da cor ou o código dela. Tabela de cores: [ 1 ] [ 2 ] [ 3 ] [ 4 ]
 Coisinhas extras: todo "comando de código", por assim dizer, é formado por: "comando de código:", se fecha com ";" e finalizando tudo se termina com "}". Alguns tipos de códigos são ativados usando <comando> de início e </comando> de final. NÃO RETIRE NENHUMA DESSAS PONTUAÇÕES.
 Se for fazer um menu ele só vai funcionar com ". nome do menu {" ou "#nome do menu {" no início. Agora, mãos a obra!

Números negativos e positivos
 Números positivos, negativos... O que eles fazem no código? Basicamente, se os números forem negativos sobe e se forem positivos seu elemento desce.

Hover
 Para que serve o hover? Serve para tudo. Ele só aparece quando você passa o mouse por algo que contenha-o. Por exemplo, um menu cujo sua aparência normal é de cor azul, se você passar o mouse sobre, ele pode ficar na cor amarela. Hover é um "comando" que vai acompanhar sempre um blog ou site em algum lugar ou página e as possibilidades de criações usando ele são infinitas.
 Para usar algum efeito hover, você pode dar uma olhada nesses links [ x ] [ x ] [ x ] [ x ]
Tamanho, altura, largura e espaçamento
Entenda precisamente o que é padding e margin nesta imagem [ x ]

padding: o espaço interno, ou seja, o tamanho do elemento em si
margin: o espaço externo, ou seja, a distância entre os lados
width: é a largura 
height: é a altura

 Seu elemento tem 4 lados, sendo eles: top (em cima), bottom (embaixo), left (esquerda) e right (direita). [ x ]
 Para arrumar o margin do seu elemento você deve coloca-lo da seguinte maneira:
margin-top: 30px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 30px;

 Para ficar mais prático você pode coloca-lo deste jeito: margin: 30px 40px 10px 30px;

E para o padding:
padding-top: 30px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 30px;

 A alteração dele também é igual ao margin: padding: 30px 40px 10px 30px;

 Os números que usei são iguais e aleatórios para "padding" e "margin", mas vocês podem alterar como acharem melhor.

 Os comandos "width" e "height" servem para definirem a largura e altura de bordas, efeitos e etc. Eles não podem ser usados para criarem o elemento em si, pois a largura e a altura são definidas só por um número, o que não te permite ajustar como quer, por exemplo, ajustar o tamanho da sidebar ou da postagem, mas serve para menus e afins. Podem ser usados assim:
width: 70px
height: 50px

ou por porcentagem

width: 70%
height: 50%

Background
Background é a cor de algo ou uma imagem de fundo. Você pode usa-lo de várias formas.

background: #código da cor;
background-imagem: url ("URL DA IMAGEM");
background-repeat: repeat-y; - A imagem se repete na vertical
background-repeat: repeat-x; - Se repete na horizontal
background-repeat: repeat; Se repete tanto na vertical como na horizontal, ou seja, em todo o espaço do elemento
background-repeat: no-repeat;  - Deixa de repetir
background-attachment: fixed; - Permite fixar a imagem
background-attachment: scroll; - Rola junto da página

 Lembrando que: você pode deixar só como "color: #cor aqui" se quer apenas a cor. Use como achar melhor.
 
Textos e fontes
Agora vamos aprender a como alterar a posição dos textos, códigos das fontes, adicionar sombras...

font-family: nome da fonte aqui;
font-size: 20px; - Tamanho da fonte
letter-spacing: 3px; - Esse comando faz com que as letras tenham um espaço entre si

Posição
text-align: right; - Faz com que o texto se posicione a direita
text-align: left; - Faz com que o texto se posicione a esquerda
text-align: center; - Faz com que o texto se centralize
text-align: justify; - Faz com que o texto se justifique, ou seja, os espaços entre as palavras serão aumentados e o texto chegará até as margens.

Enfeites
<b>escreva aqui</b> - Deixa a frase em negrito
<i>escreva aqui</i> - Deixa a frase em itálico
<u>escreva aqui</u> - Deixa a frase em sublinhado
<s>escreva aqui</s> - Deixa a frase em tachado

 Esses acima são para usar manualmente nos textos, mas se quiser coloca-los por HTML e deixar automático, siga adiante.

text-transform: capitalize; Faz com que as primeiras letras de todas as palavras fiquem em maiúscula e o resto em minúscula.
text-transform: uppercase; - Deixa tudo em letras maiúsculas
text-transform: lowercase; - Deixa tudo em letras minúsculas
text-transform: none; - Deixa sem nenhuma transformação. Se não quiser nenhum dos comandos anteriores, apenas não coloque a linha do comando que ele ficará normal.
text-decoration: underline; - Sublinha o texto
text-decoration: overline; - Deixa uma linha acima do texto
text-decoration: line-through; - Risca o texto, ou seja, tachado
font-weight: bold; - Fica negrito
font-style: italic; - Fica itálico
text-shadow: 1px 0 2px #9dbdd0; - Defina a espessura da sombra do texto e sua cor.

Para fazer um código simples com fonte, faça o seguinte:
font-family: calibri;
font-size: 20px;
color: #FF99FF;
}

Bordas
 Para ver os tipos de bordas e seus respectivos nomes (a imagem das bordas não foi feita por mim, se você for o dono, por favor avise-me) [ x ]. Essa é uma postagem legal dando códigos prontos [ x ]. E nesses links você encontrará geradores de bordas arredondadas [ x ] [ x ]. 

border: 1px solid #código da cor; - bordinha simples em volta, troque o número para um maior se quiser deixar mais grosso e altere também o tipo de borda se desejar.

Sombras
 Se você quiser usar sombra em uma caixinha, esse é um gerador de sombras essencial para isso, ele irá te mostrar exatamente como ficará, além de dar o código [ x ]


 Com tudo aqui presente, você pode criar diversos elementos. E encerramos por aqui. Bom, eu fiquei meio receosa de postar isso, pq fiquei encabulada imaginando que não está bom. Mas eu espero que tenha gostado e que lhe tenha sido útil. Eu vou ficando por aqui sz

6 comentários :

  1. Nossa, se eu soubesse pelo menos o que esses termos significavam, não tinha te dado tanto trabalho! kkkk
    Engraçado que são coisas que parecem tão complicadas à primeira vista, mas qd vc começa a mexer com elas, não são tão assustadoras assim... acho que era só questão de se adaptar mesmo a olhar para aquelas infinitas linhas de códigos... rsrsrs
    Essas dicas serão mt úteis não apenas pra mim, mas pra mta gente que ainda tem medo de mexer nos códigos e estragar td, como eu era antes do Blogueira Madrinha! =)
    Bjks!

    Hanna Carolina.

    ResponderExcluir
    Respostas
    1. Não tem nenhum problema, foi bem legal te ajudar.
      Quando eu era novata meu layouts eram bem mal feitos ou simples de mais. Quando você começa a mexer mais e pesquisar a respeito, tudo fica mais simples mesmo.
      O negócio é enfrentar esse "monstro" e botar a mão na massa, pelo menos em um blog teste, claro. Fico feliz que tenha entendido e gostado, espero que seja útil para as outras pessoas também. Se precisar de ajuda é só dar um grito kkj o/
      Beijos

      Excluir
  2. Olá flor ^^ Espero que esteja tudo bem contigo~
    Yeah, que post útil >.<
    Não entendo muito de HTML, mas decidi que esse ano vou aprender um pouco que for, então já salvei seu post nos favoritos para consultas futuras XD
    Kissus

    ResponderExcluir
    Respostas
    1. Olá! Comigo está tudo certo sim e com você? :D
      Tentei deixar organizado e ao mesmo tempo bem explicadinho. Aprender coisas novas sempre é bom, eu por exemplo estou me empolgando mais a mexer no Photoshop, vamos ver aonde isso vai dar kffdk. Mas boa sorte e mesmo que eu não seja a "maga do HTML", se precisar de ajuda é só pedir :3
      Beijos

      Excluir
  3. Olá, tudo bem Moça?

    Nossa, achei bem legal a proposta desse grupo!

    E sobre sua postagem: Bem feita e completa! Tenho certeza que será muito útil para iniciantes nesse mundo css e html!
    Adorei, e tenha certeza que será útil!

    Beijos :3


    Reino dos Unicórnios ❤ || Faça-nos uma visita!

    ResponderExcluir
    Respostas
    1. Olar, tudo ótimo e com você? ~
      É sim, participo há alguns meses lá e já vi várias coisas legais ♥
      Eu espero que sim, ainda estou em dúvidas a respeito ;u;. Mas muito obrigada <33
      Beijos

      Excluir

Seu comentário é muito importante para mim. Fique a vontade para mandar sugestões ou perguntar algo.

Por favor, siga as regras abaixo antes de comentar:
- Os comentários são moderados antes de serem publicados.
- Respeite para ser respeitado
- Tento sempre retribuir os comentários.
- Todos os comentários serão respondidos.
- Pode falar palavrões a vontade, mas tenha respeito e não xingue ninguém.
- Comentários do tipo: "Seguindo, segue de volta?" e parecidos serão ignorados.
- Deixe o link do seu blog no final do comentário. Posso acabar me interessando e seguindo.