Códigos básicos html #3 - Tutorial
Oiii gente! Faltou aquela música aleluia sabe?
Até que enfim eu vou postar algo neste blog não é mesmo?
Natal já chegando e nem os htmls da vida eu terminei...
Acho que nas promessas de 2017 vai entrar ser mais compromissada com os posts!
Sem MAIS demoras, vamos conhecer mais algumas tag para html, lembrando que tem dois posts sobre o assunto que vai ajudar muito a entender este! Mas se você já "manja" dos codes, prossiga.
Os últimos códigos citados foram os com a tag <BR> e <P>, onde vimos que pode uma pode substituir a outra em alguns casos e pra que servem (lógico); eu ainda prometi que ensinaria a colocar os textos em negrito ou itálico com códigos, a alterar o tamanho da fonte e ainda mudar as cores, e é exatamente isso que vamos aprender AGORA!
<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Estou aprendendo códigos html</TITLE>
</HEAD>
<BODY>
<H1><CENTER> Hino Nacional Brasileiro.</CENTER></H1>
<BR>Ouviram do Ipiranga as margens plácidas
<BR>De um povo heroico o brado retumbante
<BR>E o sol da liberdade, em raios fúlgidos
<P>Brilhou no céu da pátria nesse instante
<BR>Se o penhor dessa igualdade
<BR>Conseguimos conquistar com braço forte
<BR>Em teu seio, ó liberdade
<BR>Desafia o nosso peito a própria morte!
</BODY>
</HTML>
Este código acima foi um dos últimos que citei no post #2 sobre htmls e vamos continuar a partir dele okay?!
Vou diminuir o texto pra não ficar confuso o que estou fazendo, então vou usar este:
<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Hino de Minas Gerais</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Hino Nacional Brasileiro</CENTER></H1>
<BR>O seu céu é do puro anil
<BR>De um povo heroico o brado retumbante
<P>E o sol da liberdade, em raios fúlgidos
</BODY>
</HTML>
Nele temos 3 linhas e a primeira coisa que vamos mudar é a cor da fonte! A tag que usamos é a FONT COLOR, onde as cores são inseridas com palavras em inglês e são "pré-definidas", ou seja, temos algumas cores que são inseridas pelos nomes e não por códigos da paleta do Photoshop (que vamos aprender também)
Antes de inserir qualquer cor, precisamos saber quais são essas cores pré-definidas, confira abaixo quais são na tabela:
Do lado esquerdo temos em português e do lado direito em inglês, como por exemplo o azul que parece verde, que em inglês é Teal. Vou usá-la!
Mas como eu uso? Escolha a linha onde a cor deverá ser aplicada, (vou escolher a segunda) e na frente dela insiro a tag FONT COLOR e no final dela fecho com apenas FONT, dessa forma:
<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Hino de Minas Gerais</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Hino Nacional Brasileiro</CENTER></H1>
<BR>O seu céu é do puro anil
<BR><FONT COLOR = "teal">De um povo heroico o brado retumbante</FONT>
<P>E o sol da liberdade, em raios fúlgidos
</BODY>
</HTML>
Note que inseri a cor Teal entre aspas, é desta forma mesmo e minúscula, perceba também que eu fecho a tag (</) de forma diferente do que a que abro, é FONT COLOR e depois só FONT.
A visualização no navegador fica desta forma:
Coloquei a segunda linha de verde que parece azul (e não é verde-água). Bem simples!
Mas Ana, e se eu quiser apenas uma palavra com cor diferente? Mais fácil ainda! É só abrir e fechar a tag na palavra que quer destacar, desta forma:
<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Hino de Minas Gerais</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Hino Nacional Brasileiro</CENTER></H1>
<BR>O seu céu é do puro anil
<BR>De um povo <FONT COLOR = "teal">heroico</FONT> o brado retumbante</FONT>
<P>E o sol da liberdade, em raios fúlgidos
</BODY>
</HTML>
E a visualização no navegador será assim:
A palavra heroico, está destacada conforme escolhi! É só trocar o nome da cor por qualquer outra do quadro, abrir e fechar a tag onde quero que esteja essa cor e pronto! Fácil não?
Certo, 'tá' tudo muito fácil e bacana, mas Ana achei essas cores horrorosas e quero outra cor....sei lá...lilás!! Como faço?
Para isso, precisamos de um programa de edição para selecionar uma cor na paleta de cores do programa e ele vai me dar automaticamente um código para Web dessa cor. Isso quer dizer que ele vai me dar uma "senha" que quando abrir o navegador vai "se transformar" em cor kkk.
Um programa SUPER leve e fácil é o PhotoFiltre Studio X, que já falei dele aqui no blog, qualquer PC roda!
Qualquer mesmo!! Tipo um XP com 254MB de Ram e 10 de HD com processador Celeron D (era meu pc antigo, rodava) tá...empolguei aqui.
Talvez você fala "não quero baixar e aí?" CLIQUE AQUI e você será redirecionado para um site onde tem uma lista enorme com cores e códigos.
Eu prefiro um programa por ser mais fácil de localizar a cor 😆
Caso você opte por baixar, é totalmente gratuito, siga os passos para obter os códigos das cores:
1) Abra o programa e abra um novo 'ficheiro' (Ctrl+N):
2) Ponha qualquer tamanho e clique em OK:
3) Com o 'ficheiro' aberto, procure a paleta de cores, que geralmente fica ao lado direito da tela, clique duas vezes no quadrado de cor, que no meu é o quadrado rosa:
4) Abrirá toda a paleta onde poderá escolher a cor que quiser, inclusive a intensidade delas, selecione e clique em ok:
5) Feito a seleção da cor que quiser, na barra de ferramenta do lado direito da tela (abaixo da paleta de cores) selecione a ferramenta pipeta (Atalho K) onde nas informações abaixo dela terá o código Web da cor, como destaca a imgem abaixo:
Será este código que vamos colocar no html! Apenas substituindo o nome da cor por esse código:
<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Hino de Minas Gerais</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Hino Nacional Brasileiro</CENTER></H1>
<BR>O seu céu é do puro anil
<BR>De um povo <FONT COLOR = "#FF00C8">heroico</FONT> o brado retumbante</FONT>
<P>E o sol da liberdade, em raios fúlgidos
</BODY>
</HTML>
E ficará assim:
Muito fácil! E o post tá enorme!
Agora, vamos colocar em negrito e itálico o nosso texto. Vou aproveitar o último código, e destacar a palavra heroico que está de rosa choque! (#FF00C8)
As tags que usamos é B para negrito e I para itálico, desta forma:
<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Hino de Minas Gerais</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Hino Nacional Brasileiro</CENTER></H1>
<BR>O seu céu é do puro anil
<BR>De um povo <FONT COLOR = "#FF00C8"><B>heroico</B></FONT> o brado retumbante
<P>E o sol da liberdade, em raios fúlgidos
</BODY>
</HTML>
Na linha 9 coloquei a tag B, abri (<) e fechei (</) na palavra que queria destacar em negrito, caso quisesse itálico é só trocar por I. E ficará assim:
Se tiver dificuldades para ver a imagem clique nela para ampliar. E a tag é só isso! se eu quisesse a linha inteira em negrito basta colocar a tag no começo da frase e fechar no fim dela, desse jeito:
<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Hino de Minas Gerais</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Hino Nacional Brasileiro</CENTER></H1>
<BR>O seu céu é do puro anil
<BR><B>De um povo <FONT COLOR = "#FF00C8">heroico</FONT> o brado retumbante</B>
<P>E o sol da liberdade, em raios fúlgidos
</BODY>
</HTML>
E no Browser:
Gente eu vou quebrar minha promessa e vou deixar apenas as duas tags,
de negrito e itálico e de cores, porque estou achando o post muito longo e talvez muito confuso!
Mas dou minhas palavras que AMANHÃ (23/12) irei postar a de tamanho
das fontes e já ensino colocar plano de fundo!
Esperam que entendam e entrem amanhã, neste horário para conferir!
Se tiver dúvidas ou queira acrescentar algo COMENTE!
E lembrando que ao final de todos, disponibilizarei uma pasta com TODOS os arquivos com códigos, inclusive alguns mais difíceis que podem ser úteis na criação de layout's!
Beijão 😘
Até o próximo post!
*Para compartilhar essas imagens e informações no seu site ou blog não esqueça de colocar os créditos ao blog!
Compartilhe o post e ajude o blog a crescer!
Comente!
Seu comentário é muito importante para o crescimento do blog e geração de melhores conteúdos!
Comentários com insultos serão removidos!
Lembre-se: Críticas são diferentes de ofensas!