Estou eu lendo o blog do Líquid quando eu vejo algo interessante. O maluco começou a postar um curso de linux, que por enquanto esta no nível básico, mas como eu sei do que ele é capaz, sei que valerá a pena seguir o curso até o fim e ver se aprendo mais coisas com ele
Bom, continuando, gostaria hoje de falar sobre a formatação. Como vimos, podemos utilizar o HTML tanto para delimitar o ínicio e fim de coisas como o parágrafo, como para criar quebras de linha e outros elementos.
Hoje, veremos que os tags tambem servem, para mostrar quais trechos de um texto devem ser formatados.
<body>
<p>Um texto pode, dentro de um parágrafo, conter <b>negrito</b>, <i>italico</i> e/ou <strong>strong</strong></p>
</body>
Um texto pode, dentro de um parágrafo, conter negrito, italico e/ou strong
Negrito <b> e Itálico <b>
Em qualquer parágrafo, tabela, etc…, você pode definir um texto como sendo negrito (bold) ou itálico utilizando respectivamente os tags de negrito (<b>) e itálico (<i>)
<body>
<p>Uma <b>pequena</b> amostra do po<b>der do negri</b>to</p>
<p>Uma <i>pequena</i> amostra do po<i>der do itál</i>ico</p>
<p>Uma <b><i>amostra dos poderes combinados</i></b></p>
</body>
Uma pequena amostra do poder do negrito
Uma pequena amostra do poder do itálico
Uma amostra dos poderes combinados
Strong <strong> e Ênfase <em>
Strong é um tag muito parecido com o bold (negrito), mas com a diferença de que o negrito é meramente gráfico, enquanto que o tag <strong> pode ser interpretado por outros programas como leitores de páginas para surdo lendo o texto de forma diferente.
O mesmo vale para o tag <em> (ênfase) que pode ser lido de interpretado por outros programas, coisa que o tag itálico não pode pois é meramente gráfico.
<body>
<p>O tag <strong>strong</strong> alem de ser negrito serve para cegos.<br />
O tag <em>ênfase</em> alem de ser itálico serve para cegos.</p>
</body>
O tag strong alem de ser negrito serve para cegos.
O tag ênfase alem de ser itálico serve para cegos.
Renderização
Um texto com Negrito, itálico, strong, ênfase e tudo junto
Olá geeks Neste Post eu gostaria de falar sobre padrões. O mais legal de padrões, é que cada um escolhe. No caso do HTML, temos o XHTML que faz com que sua página posa ser lida em qualquer browser.
Maiúsculas e Minúsculas
Todos os tags podes ser escritos utilizando maiúsculas ou minúsculas, entretanto, é preferivel utilizar minúsculas para os tags. Para os valores de atributos dos tags (veremos mais para frente), a escolha entre maiúsculas e minúsculas faz diferença.
<body>
<P>Paragrafo com tags maiúsculas</P>
<p>Paragrafo com tags minúsculas</p>
<P>Paragrafo com tags mistas</p>
</body>
Paragrafo com tags maiúsculas
Paragrafo com tags minúsculas
Paragrafo com tags mistas
Fechamento de Tags
O código HTML é formado básicamente por tags e assim como temos tag marcando o início de alguma coisa, temos um tag marcando o final <p></p>, entretanto, alguns tags não tem um par de fechamento, como o <br>, sendo assim, por padrão, marcamos o fechamento destes tags utilizando / (barra) no final do tag <br />.
<body>
<p>Este parágrafo não foi fechado corretamente
<p>Parágrafo fechado corretamente mas,<br>A quebra não foi fechada</p>
<p>Parágrafo fechado corretamente.<br />A quebra foi fechada corretamente tambem.</p>
</body>
Este parágrafo não foi fechado corretamente
Parágrafo fechado corretamente mas, A quebra não foi fechada
Parágrafo fechado corretamente. A quebra foi fechada corretamente tambem.
Como vimos no post anterior, todo o conteúdo de uma página deve estar “embrulhado” por tags <tag></tag>, vimos tambem que o conteudo que se quer exibir deve ficar dentro do tag <body></body>.
Parágrafos <p>
Vamos ver agora como formatar o texto em parágrafos. Todo texto que pertence a um mesmo parágrafo é unido pelo tag <p>.
<body>
<p>Paragrafo 1.
Texto, muito texto, muitissimo texto faz parte deste paragrafo</p>
<p>Paragrafo dois. tambem tem texto, muito texto, muitissimo texto que faz parte apenas deste paragrafo</p>
</body>
Paragrafo 1.
Texto, muito texto, muitissimo texto faz parte deste paragrafo
Paragrafo dois. tambem tem texto, muito texto, muitissimo texto que faz parte apenas deste paragrafo
Como da pra perceber, cada paragrafo no código esta dentro do tag <p>, e dentro deste as quebras de linha e espaços em excesso são ignorados, o que, apesar de ser bom na hora de ler o código, gera o problema de como colocar uma quebra de linha dentro de um parágrafo sem terminar o mesmo.
Quebras de linha <br>
Para colocar uma quebra de linha, utilizamos um tag “single” de quebra de linha, o <br>. Este tag, diferentemente dos outros, não precisa ser fechado, ou seja, ele apenas representa uma quebra de linha, e não agrupa algum texto com a mesma propriedade (como acontece com o <p>)
<body>
<p>oi.<br>Este paragrafo tem uma quebra de linha</p>
<p>oi. Este paragrafo não tem uma quebra de linha</p>
</body>
oi. Este paragrafo tem uma quebra de linha
oi. Este paragrafo não tem uma quebra de linha
Bom, agora basta apenas testar seus novos tags e ver o resultado.
Até a próxima
Ola
da pra ver que este paragrafo tem ao menos uma quebra de linha
ou duas
Este paragrafo bem grande nao tem quebras de linha . Eu adoro paragrafos grandes assim, e voce?
Bom, para esta explicação, vou fugir um pouco do assunto e entrar, de leve, … em XML (mas bem de leve mesmo). Imagine que eu queira fazer um documento que descreva uma pessoa, sendo assim, utilizando o meu editor favorito, eu crio o seguinte arquivo:
Pelo arquivo, podemos perceber que a pessoa é descrita pelo conteudo do tag <pessoa></pessoa>, enquanto seus atributos sociais e fisicos tambem estão dentro de um grupo de tags.
Html Tag
No HTML temos o mesmo formato, ou seja, todos os dados serão “embrulhados” nos tags corretos. Todo o documento (arquivo) deve estar dentro dos tags de identificação <html></html>, e observem que, enquanto <html> é o tag de abertura do conteúdo HTML, </html> é o tag de fechamento de conteúdo.
Assim como na descrição da pessoa (que tem atributos físicos e pisicológicos), o HTML tem 2 “campos” (ou tags) básicos, <head> e <body> que marcam, respectivamente, o cabeçalho e o corpo da página.
Body Tag
Aquilo que você colocar no corpo (<body>) será renderizado pelo navegador em alguma coisa que usuário pode ver, ou seja, a página em si.
Head Tag
Aquilo que você colocar no cabeçalho (<head>) será utilizado pelo navegador para obter informações extras como o autor da página, o título e outras informações que eu explicarei mais para frente. As informações do cabeçalho, quando mal feitas, não deveriam aparecer no navegador, mas aparecem nos navegadores, mas não utilize o <head> como <body> já que não funcionará em todos os navegadores.
Bom, agora que eu já expliquei como funciona, é hora de testar, abra seu editor e coloque o código abaixo, com o conteúdo de sua preferencia no corpo, e salve como pagina.html … depois basta apenas abrir para visualizar sua primeira página
Código de exemplo.
olhe abaixo como deve aparecer no browser!!
Você poderá notar que o texto que você digitar nem sempre é o que você obterá, para corrigir tal, precisaremos dos outros tags HTML.
Bom meus camaradinhas, como eu havia prometido, aqui vai uma introdução para o tutorial de HTML
HTML?
Primeiramente, HTML é um acrónimo para Linguagem de Marcação de Hipertexto (HyperText Markup Language no original). Esta linguagem utiliza tags, ou marcadores para codificar um conteudo.
Pense em um arquivo de texto do bloco de notas, ele não tem formatação nenhuma, não aceita imagens nem nada disso, entretanto, você pode escrever no bloco de notas um trabalho e anotar "Colocar imagem do gráfico aqui", depois imprimir o seu trabalho e colar nele uma figura de uma revista, ou seja, você escreve em um arquivo de texto puro um código que você entende e que o fará colocar uma imagem no seu trabalho.
Com o HTML funcionará da mesma forma, você escreve em um arquivo de texto puro, que não aceita formataço nenhuma, códigos para que ele exiba cores, negrito, tabelas, vídeos, etc, e quem irá interpretar isso sera o Navegador.
Como diversão, faça um teste, utilizando o bloco de notas, abra um arquivo qualquer como um documento do word ou um MP3 e veja como o arquivo é na verdade, veja o que o programa tem que interpretar para dar o resultado que você esta acostumado.
Se você acessar o post através do blog (não do RSS), temos o nossa ferramenta de conversão HTML (que infelizmente não funciona no RSS) para voce praticar.
Basta apenas modificar o HTML no campo abaixo e clicar em “Renderizar” que o seu código será convertido em texto renderizado.