Aqui irei iniciar um talvez pequeno (não, acho que não será pequeno) tutorial de HTML, para quem ainda não conhece – o que acho muito difícil – segundo a Wikipedia: “HTML é uma linguagem de marcação utilizada para produzir páginas na Web.“
Em diversos sites e blogs, quando há alguma série de matérias neste estilo que aqui eu pretendo fazer é comum colocarem títulos como: “Curso de HTML“, eu já prefiro chamar de “Tutorial” porque ainda não sei a frequencia com que irei colocando os textos e também porque prefiro tentar usar uma linguagem um pouco mais informal, mas nem por isso deixando de ser sério
Basicamente o material aqui utilizado foi adaptado do site w3schools, por isso aqui será abordado o HTML tentando ao máximo obedecer aos padrões w3c, porém o w3scools não será o único site utilizado como referência, a medida que for fazendo uso de outros irei também dar os devidos créditos obviamente
Abaixo, uma pequena listagem de ‘material necessário’ para seguir este tutorial:
Quando eu der um exemplo de código HTML, copie o mesmo e cole em seu editor de textos, salve como .html e abra-o no navegador, desta forma poderemos acompanhar o progresso que faremos (apesar que ao invés de copiar e colar, se digitarmos os códigos conseguiremos fixar melhor o conteúdo)
Para começar a botar a mão na massa, a página mais simples possível em HTML obrigatoriamente tem que possuir o seguinte conteúdo:
<html> <body> Aqui você pode digitar um texto qualquer que será exibido em seu navegador! </body> </html>
Como podemos observar temos os elementos que são definidos por tag’s; no exemplo anterior temos na ordem as tags:
Observe que temos que fechar as tag’s, como por exemplo quando concluimos o conteúdo utilizamos a tag </body> e quando finalizamos o documento, fizemos uso do </html>
Dentro da edição de textos em HTML é importante sabermos delimitar parágrafos, isso pode ser feito utilizando-se a tag: <p>, assim como no exemplo abaixo:
<html> <body> <p>Isto é um parágrafo</p> <p>Este é outro parágrafo</p> <p>Mais um parágrafo</p> </body> </html>
Observe que obrigatoriamente fechamos as tags parágrafo com o </p>, o mesmo não é necessário em caso de quebras de linhas, onde usamos a tag <br>. Em HTML a forma como digitamos o texto não muda de parágrafo quando pressionamos ENTER e também não quebra a linha assim como nosso editor de textos, por isso o uso de tais tags.
Abaixo, outro exemplo de como alguns itens são ignorados, tais como parágrafos, espaços e números de linhas
<html> <body> <p>Neste parágrafo tenho algumas linhas separadas mas como eu somente fiz uso da tecla ENTER o navegador irá ignorá-las completamente. Tudo irá ficar em apenas uma linha, dependendo, claro da resolução que você utiliza e do seu navegador</p> <p>Neste outro parágrafo aqui eu fiz como algumas pessoas fazem: usei vários espaços entre algumas palavras porém o navegador também irá ignorá-los.</p> <p>Neste último parágrafo do exemplo, temos uma linha de texto um tanto quanto grande, a quantia de linhas que você verá no navegador dependerá do tamanho da janela, experimente alterar o tamanho da janela do navegador e observe as mudanças, como não fizemos uso da tag 'br' que faz a separação de linhas, temos um parágrafo com apenas uma linha enoooooooormeeeee</p> </body> </html>
Agora, no exemplo abaixo, já teremos um código HTML que faz uso sem problemas de quebras de linhas:
<html> <body> <p>Este é um parágrafo <br />que tem quebras <br /> de linha!</p> </body> </html>
Agora vamos dar início a uma breve introdução de formatação de textos, claro que mais adiante, iremos ver como aumentar ou diminuir fontes, porém, podemos fazer uso de tags específicas para títulos, assim como no exemplo abaixo:
<html> <body><h1>Este é um título tipo 1</h1>
<h2>Este é um título tipo 2</h2>
<h3>Este é um título tipo 3</h3>
<h4>Este é um título tipo 4</h4>
<h5>Este é um título tipo 5</h5>
<h6>Este é um título tipo 6</h6>
</body> </html>
Podemos também usar as tags align para alinhar os mesmos títulos:
<html> <body><h1 align="center"> Centro</h1>
<p>Como notaram, o título acima é do tipo 1 <h1></h1> que possui um atributo "align="center"" que o centraliza na página </body> </html>
Para dividir blocos de textos, podemos fazer uso de uma linha horizontal
<html> <body> <p>Isto é um parágrafo</p> Abaixo dele temos uma linha horizontal: <hr /> <p>Isto é um parágrafo</p> Abaixo dele temos uma linha horizontal: <hr /> <p>Isto é um parágrafo</p> Abaixo dele temos uma linha horizontal: <hr /> </body> </html>
Observe que neste último exemplo citado, a linha horizontal não apareceu diretamente no código, ao contrário dos anteriores. Mas se você estiver fazendo os testes como foi sugerido (fazendo o código em seu editor de textos, salvando como .html e visualizando em seu navegador) verá perfeitamente as linhas sugeridas
Em certas ocasiões você verá que é interessante fazer uso de comentários em seu código HTML. Comentários podem ser ‘explicações‘ sobre o que um determinado trecho de código faz, ou mesmo um(a) texto/área que você não deseja exibir, mas não deseja apagar definitivamente. Tudo o que você colocar <!– entre estas marcações –> não será exibido em sua página, apenas através do código fonte. Abaixo mais um exemplo prático de código:
<html> <body> <!-- Este é um comentário que não será exibido --> <p>Este é um parágrafo normal</p> </body> </html>
Apesar do texto um tanto quanto longo hoje, vamos encerrar colocando uma cor de fundo em nossa página. A forma mais fácil de fazer isso é usando na propriedade da tag o nome da cor desejada (obrigatoriamente em inglês), porém este método tem suas desvantagens, ou seja, limitações; se quisermos usar uma variedade maior de cores o ideal é expecificá-las em Hexadecimal, aqui e aqui você encontrará alguns exemplos de cores em hexadecimal que poderá usar em sua página, sinta-se a vontade para alterar o exemplo de código:
<html> <body "bgcolor=blue"><h2>Aparência: Plano de fundo colorido</h2>
<p>Em posts futuros trabalharemos com outro conceito também, os chamados estilos!</p> </body> </html>
No caso de utilizarmos cores com códigos hexadecimais, devemos especificá-los da seguinte forma: <body “bgcolor=#FFDEAD”> ou seja, o código da cor tem que ser precedido de um #.
Espero não ter me estendido muito para uma apresentação introdutória e principalmente que eu tenha sido claro, caso tenha alguma dúvida e/ou sugestão, não se intimide em entrar em contato, seja por comentário ou por e-mail. Se tudo der certo, semanalmente seguiremos com a o tutorial, ou talvez mesmo em um intevalo menor de tempo
Canonical URL by SEO No Duplicate WordPress Plugin
Olááá
Adorei o tutorial, bem explicativo e fácil entendimento. Até eu que sou leiga mas, que adora fuçar aprendi! Rs
Tenho uma dúvida, quero saber como faço pra mudar alguma imagem hospedada? E como faço para guardar em algum site para por no blog? Não posso guardar no meu pc e hospedar no blog? A imagem que falo é o cabeçalho do meu blog.
Tomara que tenha entendido.
Desde de já muito obrigada!
Olá Marília.
Se entendi bem, você tem uma imagem em seu computador e quer utilizá-la como cabeçalho do seu blog, é isso? Se for, o próprio sistema de seu blog já oferece isso. Não me recordo muito como é o blogspot (faz algum tempo que removi meu blog de lá), mas irei pesquisar o posso auxiliá-la com isso caso precise. Somente confirme se é blogspot mesmo que você usa ou alguma outra plataforma.
Obrigado pela visita, já estou preparando a 2ª parte do tutorial, aguarde…
Opa,
Meu blog é sim do blogspot(deixei o link). Então, eu mudei o template e não oferece que eu mude no layout. Terei que mudar no .html. Ai onde entra a dúvida: Terei que guardar a imagem que quero trocar em algum site de imagens ou posso colocar direto no meu pc?!? Um pouco complicado entender, rs.
Esterei esperando o próximo tutorial!
Obrigada!
[...] Veja a primeira parte do tutorial 1: [...]
Amigos preciso de uma ajuda.
Meu site no Explorer entra com fontes grandes, preciso configurar o navegador para fonte small, no Google Crome ele entra de maneira correta. Como posso em html escrever para entrar de uma maneira correta? Grato.
Olá