Códigos básicos html #2 - Tutorial
♫ 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><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:
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:
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:
*Para compartilhar essas imagens e informações no seu site ou blog não esqueça de colocar os créditos ao blog!
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:
<!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).
<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>
"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!
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!