Introdução: Básico sobre HTML e algumas tags

0
388

Há um legado de iniciantes aqui querendo aprender o triplo de sua própria vontade para se tornar um grande blogueiro, ou apenas um web designer, o que for. Não sou “o fod**” no quesito, mas conheço bem — sou mais da galera do PHP e do CocoaTouch e Cocoa (ambos para sistemas da Apple) –, mas também, sei coisas que, além de aprender dia a dia no colégio, é o básico para a sobrevivência de todos no mundo da edição de sites.

 

 

Falando em iniciantes, no blog, há um tempinho, nosso amigo Kevin já havia criado o post o que é HTML?, e para muitos, é bom ler.

Tags que deve conhecer

Há um universo de tags padrões, que vem no HTML por natureza, e há aquelas que você cria, que nesse caso, provem de grandes empresas, como por exemplo, o Google com suas ferramentas para sites/blogs em que ela cria suas próprias tags, que é <g:ferramenta>. Vejamos aqui umas que você deve conhecer e se lembrar sempre:

  • <p> – Ao utilizar esta tag, você automaticamente gera um parágrafo, usando desta maneira: <p>Este é um parágrafo</p>. Nota-se que deve fechar a tag com uma “/” antes do “p”, caso não feche o parágrafo, ele continuará.
  • <br /> – Pule uma linha pondo isto. Só por isto, e tchan, linha pulada — como podem ver, até para pular linha depende de alguma tag.
  • <div></div> – O efeito dela é no estilo. Você pode por <div id=""> ou por <div id"" class""> ou <div style=""> para utilizar. Usando id, você vai pegar uma propriedade do arquivo CSS e aplicar, que no caso, vai gerar o estilo que você gerou usando aqueles códigos no CSS, já no class, vai usar daquela certa classe provindo daquela propriedade, e no style, você vai criar um estilo sem depender de um arquivo CSS, mas aí já é avançado e pouco se usa (e não recomendado).
  • <font></font> – Sem mais delongas, você altera o estilo da letra, de certa forma que, só muda coloração, se é em negrito, sublinhado, a fonte, tamanho, e outros demais. No uso, você tem que por que abrir com <font>, mas invés de fechar direto, ponha os atributos. Existem type, color, size, e outros — sendo que aqueles são os mais importantes. typevocê muda a fonte, color, a coloração, e size o tamanho. Mas pouco é utilizado hoje.
  • <h1><h6> – Esses são os tão falados headings. Eles fazem uma hierarquia (de seis tamanhos) nos títulos do seu site, é extremamente recomendado utilizar somente um<h1> em todo seu arquivo HTML, e assim com os outros utilizar estilos em CSS para mudar o tamanho dos mesmos.
  • <b></b> – Coloca o texto em negrito. Se deve usar assim: <b>Texto em negrito</b>.
  • <i></i> – Deixa o texto em itálico. Se usa da mesma forma que o negrito.
  • <u></u> – Deixa o texto sublinhado. Se usa da mesma forma que o negrito e itálico.
  • <del></del> – Deixa o texto riscado (como este). É bem útil quando se deseja fazer uma piada ou quando você quer negar o que escreveu, esta tag também avisa aos browser e mecanismos de busca para rejeitar o texto que está dentro, dando uma menor importância.
  • <big></big> – Bom para quem quer deixar o texto maior para destacar algo.
  • <small></small> – Faz o mesmo que o <big>, só que o efeito é ao contrário, onde você diminui o texto.
  • <strong></strong> – Tem o mesmo fim que <b>, mas, avisa o browser e mecanismos de busca que o texto dentro desta tag tem maior relevância que o resto.

Estrutura do HTML

html-tattoo

Sempre há aquela estrutura de sempre, e o próprio post sobre o que é HTML já há a estrutura, mas por fim, algo mais detalhado é melhor.

Obrigatoriamente, se deve usar deixar nesta ordem — acho bom você até gravar isto, porque se não saber, você vai pagar mico.

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Vamos por parte.

  • <html></html> – Necessita para verificar se é HTML. Num futuro qualquer, que é algo bem mais avançado, vocês vão entender porque da tal necessidade, porque há várias linguagens como PHP, C, C#, Python, e a falta disso pode resultar em algo catastrófico.
  • <head></head> – Significa que você está editando coisas do cabeçalho do blog. Não se deve por nada ali além de scripts e estilos do CSS, por exemplo, se você por algo ali, nada aparecerá.
  • <title></title> – Já notou na região de título no seu navegador (ou até mesmo na aba) que há um nome ali escrito? O que está escrito ali, aparecerá dependendo do que você escrever entre essa tag.
  • <body></body> – Dessa tag você começa os inventos. Com isso, você pode começar a produção do seu site, porque ali, você já pode levantar o que vai aparecer para as pessoas.

Sacaram? É bem simples fazer isso. No início, como até eu achei, é meio complicado, mas nada que uma estudada em HTML em uma hora por dia ajude. Mexo nisso há 3 anos e meio, e até hoje eu não sou bom o suficiente porque eu sou meio largado, mas agora eu sei bastante e cá entre nós, isso não é mistério algum.

Enfim, deu pra entender? Alguma dúvida? Compartilhe conosco via comentários para nossa equipe ajudar, e se a nossa equipe não ajudar, ainda tem os outros leitores. Vamos ver como se saem e boa sorte.

RECEBA NOSSAS ATUALIZAÇÕES GRÁTIS
Enviamos nossos novos posts por e-mail para que você não perca nenhuma novidade!