Dicas – HTML e CSS

Para você iniciante em html e css

Inicialmente use um editor de texto que não possua auto-completar ou do gênero, pois, isso dificulta sua aprendizagem, e quando o auto-completar é usado por muito tempo, você pensa que sabe html e css e quando precisa usar um editor “pobre” ficará perdido(a).

Evite copiar e colar tudo que for igual ou criar atalhos para facilitar sua vida, tente digitar tudo até que você se sinta a vontade com a linguagem para que depois você possa usá-la em qualquer computador com confiança.

Agora vamos lá…

Abra um arquivo novo e salve com um nome estiloso, legal, que lembre página inicial, tipo assim, por exemplo, home.html – Salve com o nome que desejar e coloque a extensão .html

Abra esse arquivo no editor de texto e agora começa a brincadeira.

Para iniciar uma página em html precisam ser usadas algumas tags (modos de marcação e separação do código) específicas e manter um código semântico, ou seja, organizado.

Abaixo veremos passo a passo como construir uma pequena e breve página em html:

Em primeiro lugar temo que especificar o Doctype, o que é isso? credo, ser de comer? ahm, não! É se não o mais, um dos mais importantes ítens do código, serve para informar ao browser que tipo de documento será visualizado e deve ser colocado na primeira linha do código.

Temos 3 tipos:

  • Strict: usado mais para códigos feitos corretamente, semânticamente corretos, 100% html. É representado dessa maneira:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  • Transitional: Normalmente usado em códigos mal preparados, contendo erros no código, e também para quem esta fazendo a transição do código antigo para o atualizado. É representado dessa maneira: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  • Frameset: Usado para quem ainda trabalha com frames. É representado dessa maneira: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

OKKKKK… Já temos a nossa primeira linha de código para o documento hmtl!!!

Seu próximo passo é saber que depois do doctype existem algumas tags que compõe o código e são importantes para a estrutura do mesmo e são elas: <html>, <head>, <title>, <body>.

Com essas 4 tags basicamente já conseguiremos trabalhar com uma simples estrutura.

Lembrando!!! As tags representadas acima, estão abertas e é necessário sempre fechá-las.

Veja abaixo uma estrututa:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title></title>
</head>
<body>
AQUI VAI TODO SEU CONTEÚDO!!!
</body>
</html>