Archive for 2016

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!



Como eu era antes de você - Marcadores

domingo, novembro 27, 2016 2 Comments A + a -

(Foto: blogbemmequero.com)


Oi! Tudo bom?!
Mais marcadores para o blog! Mas agora é de um livro lindíssimo! Como eu era antes de você, da autora Jojo Moyes.

Este é um livro que ficou bem conhecido, principalmente com o lançamento do filme, confesso que com o título achei que se tratava de um livro mais romântico e que no final esse relacionamento acabaria, até porque o outro livro que vi é "A garota que você deixou para trás" e achava que era continuação, mas que claro não nada a ver kkkkk. Depois que li eu fiquei meio em choque e é incrível, realmente vale a pena ler. 
Vou aproveitar e indicar um blog que tem uma resenha com um estilo diferente, para você que leu e não leu! Passa lá e dá uma conferida, basta clicar aqui.

Claro que se eu gostei do livro, recomendo e ainda tem frases lindas tem que ter marcadores! Vamos conferir?!

1)"Quando eu era pequena...Minha roupa favorita era minha meia-calça de abelha."

(Amei essa meia-calça e resolvi fazer esse marcador kk)


2) "Alguns erros...apenas têm consequências maiores que outros. Mas você não precisa deixar que aquela noite seja aquilo que define quem você é."


3) "Você só vive uma vez. É sua obrigação aproveitar a vida da melhor forma possível."


4) "A finalidade da música é fazer com que você se desligue do mundo."



Meu preferido é o primeiro kkk adorei essas meias e um marcador criativo assim é só aqui! Frente e verso estão unidos para facilitar a impressão e redimensionamento da imagem, e se você quiser esses marcadores em melhor qualidade para imprimir clique aqui e você será redirecionado para a página de Download (4shared).

Se você ainda não leu, espero que leia!
Visite o link do blog que deixei com uma resenha diferente
e espero que todos tenham gostado! 
Principalmente quem virou fã de Louise Clark e Will Traynor ;)

Bom, é isso! *
Espero vocês no próximo post!
Até lá!






*Gostaria de lhe pedir humildemente que assine nosso Newsletter para não perder nenhum post, e dê uma olhadinha no "Meu Negócio", a Eye Candy. Obrigada! *-*


*Para compartilhar esses marcadores 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 #2 - Tutorial

quinta-feira, novembro 24, 2016 0 Comments A + a -



♫ Eu volteeeiii, agora pra ficar ♪
Tudo good com vocês?
Hoje, voltarei a falar dos códigos básicos, esse é o 2º post e se você não leu o primeiro corre aqui e leia! Ou fica aqui mesmo...você quem sabe☺ 

 Bom, o último código aqui citado foi este:

<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Estou aprendendo códigos html</TITLE>
</HEAD>
<BODY>
<H1>Meu primeiro documento em HTML, treinando com o blog Garota Neon.</H1>
Eu vou estar apto a desenvolver e personalizar layout"s.
</BODY>
</HTML>

E portanto com esse código que vamos continuar! Agora vamos colocar orientação no nosso texto, ou seja, podemos colocá-lo no centro, alinhado à direita ou alinhado à esquerda. Para isso usamos as tags:

RIGHT ~> alinhar à direita;

LEFT ~> alinhar à esquerda;

CENTER ~> alinhar ao centro;

ALIGN ~> tag usada para alguns navegadores para alinhar o texto.

Como colocamos isso no código? Simples! Na linha que queremos alinhar o texto! Dessa forma:

<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Estou aprendendo códigos html</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Meu primeiro documento em HTML, treinando com o blog Garota Neon.</CENTER></H1>
Eu vou estar apto a desenvolver e personalizar layout"s.
</BODY>
</HTML>

 Note que optei por centralizar o texto, então coloquei a tag CENTER, e lembre-se que sempre se abre a tag ( < ) e fecha ( > ) no começo da frase que essa tag está sendo aplicada e no fim você abre ( </ ) e fecha ( > ). Assim que abrir no browser ficará assim:

O título "Meu primeiro documento em HTML, treinando com o blog Garota Neon." está agora centralizado. Vale lembrar que o título que está na tag TITLE é o título da página e não do texto, portanto não se pode alinhar (bom,até onde sei e testei, com essas tags não).

Caso você siga esses mesmos passos e não tenha funcionado você pode incluir a tag ALIGN, que para mim é uma tag especial, no meu browser por exemplo, se coloco ela, não funciona! Tente e veja se consegue:

<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Estou aprendendo códigos html</TITLE>
</HEAD>
<BODY>
<H1><ALIGN=CENTER>Meu primeiro documento em HTML, treinando com o blog Garota Neon.</ALIGN=CENTER></H1>
Eu vou estar apto a desenvolver e personalizar layout"s.
</BODY>
</HTML>

Se o primeiro funcionou nem teste este. Vamos continuar! Agora imagine que você queira colocar uma letra de música por exemplo, você precisa colocar cada verso dessa letra em linhas diferentes certo? Por exemplo:

"Ouviram do Ipiranga as margens plácidas
De um povo heroico o brado retumbante
E o sol da liberdade, em raios fúlgidos
Brilhou no céu da pátria nesse instante"

 É preciso de um espaçamento simples para cada frase! Se você apenas teclar Enter enquanto digita no código html, isso não irá acontecer. Isso porque para ser exibido assim precisa de um código que "ordene" que seja exibido dessa forma. Para isso usamos a tag BR, desse jeito:
<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Estou aprendendo códigos html</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Meu primeiro documento em HTML, treinando com o blog Garota Neon.</CENTER></H1>
<BR> Eu vou estar 
<BR> apto a desenvolver 
<BR> e personalizar layout"s.
</BODY>

</HTML>

 A tag BR não é preciso fechar ( </ ) no final da frase, pelo menos não por enquanto. Assim que salvar como documento html (como ensinei no último post) e abrir no Browser aparecerá assim:

Simples não? Mas e se por acaso eu quiser colocar a letra toda? Ou ainda escrever uma poesia onde tem estrofes? Precisamos separá-las e é aí que entra a parte de "fechar a tag" BR. 
Vamos escrever duas estrofes do hino nacional brasileiro no nosso código e mudar o título! Desse jeito:

<!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>
Ouviram do Ipiranga as margens plácidas
De um povo heroico o brado retumbante
E o sol da liberdade, em raios fúlgidos
Brilhou no céu da pátria nesse instante

Se o penhor dessa igualdade
Conseguimos conquistar com braço forte
Em teu seio, ó liberdade
Desafia o nosso peito a própria morte!
</BODY>
</HTML>

Se abrirmos esse código no browser, não vai estar organizado, pois não tem a tag BR:


Porém, se eu colocar a tag BR ficará organizado! Só que, precisamos também separar as estrofes, desse jeitinho:

<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
<BR>Brilhou no céu da pátria nesse instante </BR>

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

Observe que temos a tag BR em todos os versos e no último verso da primeira estrofe (Brilhou no céu da pátria nesse instante) temos o "fechamento da tag" que é com o símbolo ( </ ), isso indica que preciso de um espaço entre essa linha e a próxima! Veja no browser:



Mas talvez você queira ter esse espaçamento em todas as linhas, basta você abrir ( <BR> ) e fechar ( </BR> ) em cada um dos versos. Confesso que é cansativo.... e é por isso que uma tag própria para isso! kk
É a tag P, isso mesmo, quando você a usa, é a mesma coisa que você abrir e fechar tag BR. Assim:

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

E fica desse jeito:


Ou ainda:

<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>
<P>Ouviram do Ipiranga as margens plácidas
<P>De um povo heroico o brado retumbante
<P>E o sol da liberdade, em raios fúlgidos
<P>Brilhou no céu da pátria nesse instante

<P>Se o penhor dessa igualdade
<P>Conseguimos conquistar com braço forte
<P>Em teu seio, ó liberdade
<P>Desafia o nosso peito a própria morte!
</BODY>
</HTML>

E fica assim:


Bacana né! E tem mais um truquezinho ainda! Se você colocar duas vezes a tag BR, ela equivale a uma tag P, confuso? Talvez. Mas é que em vez de você usar P você pode usar duas vezes a tag BR. Assim:

<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><BR>Ouviram do Ipiranga as margens plácidas
<BR><BR>De um povo heroico o brado retumbante
<BR><BR>E o sol da liberdade, em raios fúlgidos
<BR><BR>Brilhou no céu da pátria nesse instante

<BR><BR>Se o penhor dessa igualdade
<BR><BR>Conseguimos conquistar com braço forte
<BR><BR>Em teu seio, ó liberdade
<BR><BR>Desafia o nosso peito a própria morte!
</BODY>
</HTML>

Que tem o mesmo efeito do P:

<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>
<P>Ouviram do Ipiranga as margens plácidas
<P>De um povo heroico o brado retumbante
<P>E o sol da liberdade, em raios fúlgidos
<P>Brilhou no céu da pátria nesse instante

<P>Se o penhor dessa igualdade
<P>Conseguimos conquistar com braço forte
<P>Em teu seio, ó liberdade
<P>Desafia o nosso peito a própria morte!
</BODY>
</HTML>

Usando qualquer uma dessas, fica assim:



Bom, vou parar por aqui! 
Agora você sabe colocar título, corpo de um texto, alinhar esse corpo, aumentar ou diminuir o tamanho da fonte, salvar arquivos hmtl e colocar espaçamento nesse corpo!
UAU!!! kk 
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, e qualquer dúvida ou erros, comentem!!!

No próximo post vou ensinar a colocar em Negrito ou Itálico o seu texto,
a colocar um tamanho próprio e específico de fonte, como tamnho 20, 14, 8 etc. 
e ainda mudar as cores!

Se interessou? Te espero!
Até breve!




*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 #1 - Tutorial

quinta-feira, novembro 03, 2016 0 Comments A + a -


Oi gente! tudo bom?!
Estava olhando aqui e percebi que nunca postei nada sobre códigos html e nenhum tutorial... resolvi então fazer uma "mini série" de posts sobre isso. É bem básico mesmo o que vou explicar, mas é útil... Vamos lá! :D

Os códigos html é como se fosse um guia para que o sistema leia de maneira correta e também mostre todas as informações de modo mais organizado e fácil de entender. 
Cada "peça" do nosso arquivo se chama tag, existem inúmeras e é muito difícil você decorar todas; o bom é conhecer e decorar as básicas e quando precisar de alguma basta você pesquisar ou usar programas para agilizar esse processo. Um desses programas é o Adobe Dreamweaver, onde ele monta todo o arquivo e você pode personaliza-lo, porém é necessário ter alguns conhecimentos básicos.

As tags mais básicas são:

!DOCTYPE ~> que é necessária para arquivos html 3.2 para identificar o documento ao browser, e mostrá-lo de maneira certa;

HTML ~> serve para definir o tipo de arquivo, permitindo que seja identificado por outras aplicações na internet;

HEAD e BODY ~> contém informação sobre a URL de sua página como também o relacionamento da mesma com outras páginas do seu site. O único elemento visível ao usuário na seção HEAD será  o título da página;

TITLE ~> permite a adição de um título para a página;

H1 ~> adiciona um cabeçalho da qual pode alterar esse número de 1 a 6, sendo que quanto maior o número, menor a letra.

Vamos montar uma então para entender como funciona cada uma delas:

<HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Estou aprendendo códigos html</TITLE>
</HEAD>
<BODY>
Meu primeiro documento em HTML, treinando com o blog Garota Neon.
</BODY>
</HTML>

Com esse arquivo temos a seguinte visualização no browser:



Obs.: nós sempre "abrimos' uma tag (com este caractere: <) e "fechamos" logo depois (com este caractere: >). E sempre terminamos uma "parte" da página (como cabeçalho, local para posts, etc) com os caracteres: /<

Perceba que a primeira linha é a tag hmtl. Quando pesquisarmos uma página na web, o brower (navegador) poderá identificar que tipo de código está sendo usado nesta página e poderá ler certinho e mostrar tudo sem erros, nesse caso é um html. Essa tag (html) está seguida da tag !doctype e as especificações dela.

Na terceira linha vem a tag head, identificando que ali começa o cabeçalho, que é a "cabeça" mesmo da página, perceba que depois dela a gente já coloca a tag title, ou seja, o meu cabeçalho terá um título. Depois de 'abrirmos' e 'fecharmos' a tag title, na frente dela, colocamos o título que quisermos; observe muito bem que quando eu acabo de colocar o meu título, eu termino com </ (dessa forma: </TITLE> )

Obs.: Bom, eu nunca tentei fazer com letras minúsculas, sei que desse jeito funciona e você pode usar o bloco de notas do seu computador para copiá-los e testá-los. Para salvar o bloco de notas como hmtl, basta colocar o nome do arquivo como ".html" sim, tem um ponto antes de hmtl



Depois nós terminamos o cabeçalho com </,  'abrimos' o corpo da nossa página. Nele vai ter o que queremos que a página tenha escrita, seja um texto, um poema, uma letra de música, enfim...assim que terminar de escrever, termine com </.

Desse modo já temos uma página com componentes mais básicos, com o título e corpo. Para definir tamanho das letras, use a tag <H1>, desse jeito:

<HTML>
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HEAD>
<TITLE> Estou aprendendo códigos html</TITLE>
</HEAD>
<BODY>
<H1>Meu primeiro documento em HTML, treinando com o blog Garota Neon.</H1>
Eu vou estar apto a desenvolver e personalizar layout"s.
</BODY>
</HTML>

Agora além de um título para página, podemos colocar títulos no corpo também! Apenas usando a tag H1, é muito importante lembrar que vai de 1 a 6, e que quanto maior o número, menor a letra.



Por hoje é só!
Enquanto o próximo fica pronto, aproveite para testar e "brincar" com estes códigos.
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.
Espero que gostem!
 Até próximo post, e qualquer dúvida ou erros, comentem!!!
*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!

Assinar: Postagens ( Atom )