Códigos básicos html #4 - Tutorial

sexta-feira, dezembro 23, 2016 0 Comments A + a -



Boa tarde!! Vamos continuar a nossa maratona de códigos e tags!
Se você é visitante, não esqueça de conferir os outros 3 posts anterior a este
tem na barra DIY & Tutoriais todos lá 😉

No último post fiquei devendo a tag de alterar o tamanho da fonte, 
então vamos começar por ela e já aproveito e ensino a colocar plano de fundo no nosso html. 
Bora começar!

O último código citado foi 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><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>

Nele tem a segunda frase do nosso texto toda em negrito e a palavra heroico de rosa. Vou organizá-lo tirando o negrito e deixando tudo de preto mesmo, que é a cor padrão da fonte, então o código que vou usar será 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>

A tag que usamos para alterar o tamanho da fonte do texto do nosso html é a FONT SIZE, funciona da mesma forma que a FONT COLOR, onde terminamos a tag (/>) somente com FONT. Vamos montar pra entender, vou colocar a primeira frase tamanho 1, a segunda 2 e a terceira 3, para isso o html ficará assim:


<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>
<FONT SIZE = "1">O seu céu é do puro anil</FONT></BR>
<FONT SIZE = "2">De um povo heroico o brado retumbante</FONT><BR>
<FONT SIZE = "3">E o sol da liberdade, em raios fúlgido</FONT><BR>
</BODY>
</HTML>

E a visualização no navegador ficará assim:


Com toda sinceridade não acho tão necessária a tag já que eu posso alterar usando a H, que expliquei no primeiro post de html, que quanto maior o número, menor a fonte, indo de 1 a 6. Porém acho muito válido aprender porque pode aparecer num template por exemplo e você saberá alterar, nunca se sabe...

Agora plano de fundo! A tag usada é a BGCOLOR. Bom como se usa? Ela é semelhante as cores da fonte que também ensinei no post passado, escolhemos a cor do fundo com os códigos Web das cores, tem um site com uma lista das cores e seus códigos é só CLICAR AQUI para ser redirecionado ao site. Também ensinei a "pegar" esse código no PhotoFiltre, se não viu entra lá e dê uma lida 😁

Muito bem, vou usar o mesmo código html com tamanhos de fonte diferentes e colocar o plano de fundo rosa (#FF00C8), a mesma cor do post passado kk. Colocando, ficará assim:


<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Hino de Minas Gerais</TITLE>
</HEAD>
<BODY BGCOLOR = "#FF00C8">
<H1><CENTER>Hino Nacional Brasileiro</CENTER></H1>
<FONT SIZE = "1">O seu céu é do puro anil</FONT></BR>
<FONT SIZE = "2">De um povo heroico o brado retumbante</FONT><BR>
<FONT SIZE = "3">E o sol da liberdade, em raios fúlgido</FONT><BR>
</BODY>
</HTML>

Antes de ver no navegador, quero que observe bem que a tag BGCOLOR entra na frente da tag BORY, na 6ª linha do nosso código, caso contrário não funciona. As cores pode ser as "pré-definidas" também, aquelas da tabela do último post, por exemplo red, navy, green... Depois que colocar a cor, no Browser aparecerá assim:


Rosa BEEMM chocante kkk  Podemos colocar também imagens no plano de fundo, mas para isso precisamos entender a tag de inserir imagens, onde logicamente colocamos imagens no corpo do nosso texto. Para esse post não ficar longo e confuso ensinarei no próximo post! 


Então é isso!
Pense positivo! Cumpri minha promessa! Trouxe as tags e dou certeza que vai ter mais.
Não esqueça de comentar se encontrar erros e dúvidas,
E não se esqueça também que no último post de html básico 
disponibilizarei uma pasta com TODOS os códigos aqui usados e mais alguns úteis.

Espero vocês no próximo post!
Até lá. Beijão 😘







*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!


Códigos básicos html #3 - Tutorial

quinta-feira, dezembro 22, 2016 0 Comments A + a -


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!