Tutorial de html – parte II
Continuando com o Tutorial de HTML, vamos apenas nos lembrar que no último post, aprendemos somente a:
- Usar as tags <html></html> para ‘dizer’ ao navegador qual linguagem ele deve interpretar;
- Que é entre as tags <body></body> que devemos colocar o conteúdo de nossa página;
- Com as tags <p></p> identificamos parágrafos, pois o navegador não interpreta o "Enter" da mesma forma que os programas editores de texto que estamos habituados a utilizar;
- Da mesma forma, "espaços duplos" serão interpretados como "simples";
- Para darmos uma "quebra de linha", fazemos uso da tag <br /> (Um dos casos em que não há a necessidade de abertura e fechamento de ‘tags’;
- Há 6 tipos de títulos que podemos utilizar:
- <h1></h1>
- <h2></h2>
- <h3></h3>
- <h4></h4>
- <h5></h5>
- <h6></h6>
- Com o parâmetro align="center" dentro de alguma tag de título, como por exemplo:
<h1 align="center">Centralizado</h1>
teremos o mesmo no alinhado horizontalmente na página; - Teremos uma linha horizontal se usarmos a tag: <hr /> (Outro exemplo onde não precisamos abrir e fechar tag’s
- Tudo o que colocarmos dessa forma <!– Não aparecerá na página –>, ou seja é um comentário;
- E por fim, com o parâmetro "bgcolog=blue" na tag "body", como em:
<body "bgcolor=blue">
teremos um fundo azul em nossa página.
Enfim, vendo assim, em forma de revisão, percebemos que não foi tão pouca coisa quanto parecia no princípio, pois agora já podemos pelo menos ter uma página inicial.
Vamos então para mais alguns ítens, hoje vamos aprender a deixar nosso texto em negrito, itálico1, um pouco menor, sobrescrito e subscrito – Esses dois últimos muito usados em fórmulas matemáticas, por exemplo.
Bem, vamos ao código:
<html>
<body>
<strong>Este texto está em negrito!</strong><br />
<em>Este texto é em itálico!</em><br />
<small>Compare este com os outros, verá que está menor</small><br />
Lembra das fórmulas: E=mc<sup>2</sup>, ou então: H<sub>2</sub>O?<br />
</body>
</html>
Anteriormente expliquei que o HTML não interpreta espaços, e quebras de linha como outros editores, mas podemos fazer uso da tag <pre></pre> para que nosso texto fique no navegador exatamente da mesma forma que digitamos:
<html>
<body>
<pre> Este é um texto que irá conservar suas formatações, ou seja espaços e quebras de linha! </pre><p>Esta tag é bem utilizada para exibir códigos, por exemplo:</p>
<pre> for i = 1 to 10 print i next i </pre>
</body>
</html>
Pouco utilizadas, (eu mesmo nunca usei – esta é a primeira vez), podemos inverter o texto que digitamos (não são todos os navegadores que suportam este recurso – por isso na primeira parte do tutorial aconselhei a instalação de outros navegadores). Veremos a seguir:
<html>
<body>
<p>Caso seu navegador aceite este recurso o texto a seguir estará invertido:</p>
<bdo dir=”rtl”>Estranho ler este texto</bdo><br />
</body>
</html>
Ao contrário do recurso anterior, este já é muito utilizado, as citações, longas <blockquote></blockquote> e curtas <q></q>:
<html>
<body>
Este é um exemplo de citação longa:
<blockquote>Devem ter percebido que este tipo de citação até agora muito utilizado no decorrer deste tutorial. Quando trabalharmos com estilos, verão que poderemos ter diversos tipos de comportamento de tais citações!</blockquote>
Aqui uma sitação curta:
<q>Esta é mais simples.</q><p>Na verdade a citação curta não passa das velhas aspas duplas, mas este é um caso especial que também veremos mais tarde.</p>
</body>
</html>
Quando editamos um texto, por vezes desejamos ainda exibir os trechos de textos que foram excluídos, então segue aqui o último exemplo de hoje:
<html>
<body>
<p>Eu <del>quase</del> nunca minto!</p>
<p>A maioria dos navegadores irá ‘riscar’ a palavra entre as tags, mas este é um recurso não suportado por navegadores mais antigos.</p>
</body>
</html>
Ok, por hoje é só, continuem acompanhando o blog que ainda teremos mais tutoriais ’saindo do forno’. Dúvidas? Não fique acanhado(a) em entrar em contato, por comentário ou por e-mail.
Veja a primeira parte do tutorial
1:
Na maioria dos tutoriais, aulas e cursos de HTML, você verá será instruído a fazer uso da tag <b></b> para deixar seus textos em negrito e <i></i> para itálico, porém eu aqui prefiro usar as tags <strong></strong> e <em></em> por estas seguirem padrões de acessibilidade, ítem indispensável para web hoje, mas com o qual não havia muita preocupação até pouco tempo. voltar
Obrigado
Bem interessante esse teu tutorial de html, ñ sou programador e nem pretendo me aprofundar. Mas nas minhas andanças em virar blogueiro, tive que recorrer ao Google, p/ aprender desde um simples pular de linha em html. E esse teu artigo, fiz questão de salvar, pois tem muita coisa a mão.
Cara…
Que bom que alguem mais acabou se interessando por estes tutoriais. Na verdade era um projeto que eu acabei ‘deixando de lado’ porque vi que não estavam tendo o resultado desejado, infelizmente pouca gente se interessou. Talvez por falha minha.
Mas é bom ver que pelo menos alguem além de mim tenha gostado.
[]’s
Felix