Guia de como iniciar com HTML
Para você que ainda não sabe como iniciar com HTML vou explicar da maneira mais simples e prática para começar a criar sites.
Software necessário:
Bloco de notas do Windows
O que são TAGS?
De uma maneira bem simples tag é tudo aquilo que estiver entre o sinal de menor ( < ) e de maior ( > ). EX:
<html>
Toda Tag tem que ser aberta e fechada em ordem. Para fechar o conteúdo da tag, basta fechala com uma barra logo após o conteúdo. EX:
<div>conteudo</div> <p>conteudo</p> <h1>conteudo</h1>
Sempre mantenha a ordem das tags, se abrir uma, não esqueça de fechá-la.
Tags que você tem que decorar:
html -> Tag para inciar o documento html, obrigatório seu uso.
head -> Define o cabeçalho do documento a cabeça, como o título, o que será encorpado, adicionado ao documento html.
body -> todo conteúdo deverá ficar dentro da tag body, seu uso é obrigatório assim como as tags html e head.
Outras tags que você utilizará muito são as de parágrafo, imagens, títulos, links … vou descreve-los e exemplificar.
h1, h2, h3, h4, h5 -> Tags de títulos
p -> tag de parágrafos
img -> tag de imagens
OBS: As tags podem possuir atributos, como identificação, formatação, etc. EX:
<p id="meu-primeiro-paragrafo">Olá, esse é meu primeiro parágrafo</p>
note que todo atributo deverá ser inserido dentro da tag de abertura ( a que não possui a / na frente ), seguido de = e o valor sempre dentro de aspas duplas. OK??? Tem que seguir isso, vamos voltar. ao conteúdo.
O que será ministrado aqui é um ensinamento específico de html para uso com css que depoiiiiisss eu farei um tutorial, por enquanto é hora de aprender HTML.
O link
Para criarmos um site, precisamos de links, que são âncoras de acesso a outros arquivos, páginas, etc. A tag utilizada é a tag seguinte.
<a>Meu link</a>
Calmaaaaaaa, ainda não terminei. Para você conseguir criar o link para outra página, precisamos de um atributo para fazer a ligação, por isso expliquei anteriormente o que era um atributo, então vamos continuar. O exemplo abaixo terá um atributo dentro da tag “a” chamado href, que irá criar a referência.
<a href="pagina.html">Meu link</a>
Como você pode ver, o atributo href faz referência à página html.
Tendo os links e o básico para construir um site primário, vamos ao exemplo para você começar a entender na prática como fazer.
Abra o bloco de notas e digite a estrutura básica do HTML, que é:
<html> <head> <title>Meu primeiro site</title> </head> <body> </body> </html>
Essa é a estrutura básica para criação de um site, a tag html, head e body. Pense em uma pessoa formada de cabeça e corpo. Seria mais ou menos isso. Tudo que você escrever dentro de body será visualizado pelo cliente que acessar a página.
Vamos fazer um pequeno site com 4 links e conteúdo sobre os 4 grandes times de futebol do Rio de Janeiro.
São os links, Botafogo, Flamengo, Fluminense e Vasco.
O conteúdo vamos fazer um comentário com 2 linhas e cada página deverá ter o título com o nome do clube.
Com o bloco de notas aberto e a estrutura digitada, vamos melhorar o código e inserir os links e o primeiro time que é o botafogo.
<html> <head> <title>Site sobre times - Botafogo</title> </head> <body> <a href="botafogo.html">Botafogo</a> / <a href="flamengo.html">Flamengo</a> / <a href="fluminense.html">Fluminense</a> / <a href="vasco.html">Vasco</a> <h1>Botafogo Futebol e Regatas</h1> <h2>Time da estrela solitária</h2> <p>Esta é a página do Botafogo.</p> </body> </html>
Antes de salvar o documento, crie uma pasta na área de trabalho com o nome times. Agora salve como botafogo.html, igual ao que está no link que você digitou dentro da pasta times que você criou.
DICA: Use sempre letras minúsculas, sem acentos e sem espaços para definir o nome do arquivo. Se tiver que utilizar espaços, use os sinais “-” e “_”. EX: joao-da-silva.html … botafogo_futebol_de_regatas.html.
Agora vamos criar um novo arquivo no bloco de notas com a estrutura básica novamente e vamos inserir o menu com links e o conteúdo do time Flamengo.
<html> <head> <title>Site sobre times - Flamengo</title> </head> <body> <a href="botafogo.html">Botafogo</a> / <a href="flamengo.html">Flamengo</a> / <a href="fluminense.html">Fluminense</a> / <a href="vasco.html">Vasco</a> <h1>Clube de Regatas Flamengo</h1> <h2>Time da maior torcida do Brasil</h2> <p>Esta é a página do Flamengo.</p> </body> </html>
Note que o menu é o mesmo da página do botafogo. Salve como flamengo.html, do mesmo jeito que escreveu no link da página para quando você clicar no link, ele consiga achar o arquivo.
Repita o processo com o time do fluminense e o time do vasco.
Note que sempre que a última tag a ser aberta será sempre a primeira a ser fechada. EX:
<div><p>Olá, meu outro site é <a href="http://www.alexandremattos.com.br">www.alexandremattos.com.br</a>, acesse!</p></div>
Explicação: Tenho um parágrafo que está dentro de uma divisória. Meu parágrafo contém um link externo ( que leva para outro site ).
Agora vamos inserir imagens dos times antes do título da página, para ficar bem legal. As imagens se encontram junto com o zip dos arquivos para você poder seguir o passo 2.
Onde está a linha
<h1>Clube de Regatas TIME</h1>
você irá inserir a tag de imagens que é img com o atributo src que fará a ligação com a imagem. EX de como ficará:
<img src="vasco.gif" alt="Escudo do Vasco" /> <h1>Clube de Regatas Vasco da GAMA</h1>
Note que eu fechei a tag img na abertura dela e não com 2 tags como estamos acostumados a fazer, isso é devido a excessões no código. As tags mais comuns de se fazer isso são: img e br.
a tag br é utilizada para quebrar linha ( do inglês break line ).
<br /> <img />
Essas são as 2 tags que fecharão em si mesmas. voltando ao código, o src fará a referencia da figura enquanto o atributo alt dará o nome alternativo. Nunca esqueça de inserir o atributo alt, para caso sua imagem não aparecer, o usuário poder identificar o que a imagem que não abriu queria passar.
Repita com as outras páginas. Abaixo vai uma SS de como ficou.
Vasco
<a href='http://www.alexandremattos.com.br/blog/wp-content/uploads/2010/02/times2.zip'>times2</a>
[sourcecode]
Então já sabemos que o primeiro código a fazer é:
[sourcecode language="html"]
<html>
<head>
<title>Titulo da pagina</title>
</head>
<body>
<!--conteudo da pagina -->
</body>
</html>
Agora é só complementar o seu estudo e cair dentro do HTML. Segue um site muito bom para aprender. O site é baseado na lingua inglesa, mas se seguir o raciocínio, só com os exemplos você acaba entendendo.
Site Referência: http://www.w3schools.com/html/default.asp
2 Comentários to Guia de como iniciar com HTML
Deixar um comentário
Pesquisar no Blog
Tópicos recentes
Calendário de Posts
Arquivos
- fevereiro 2010 (1)
- dezembro 2009 (14)
oi,eu gostaria da sua resposta…eu fiz a estrutura básica do html e salvei,soque não deu certo,eu já conferi e tá tudo certo,o que eu faço??
Opa Daniela, me desculpe,
ao criar o tutorial acabei esquecendo de fechar um atributo que acabou gerando um erro na página. Agora já está resolvido, pode testar.
Qualquer coisa tem o link do arquivo -> http://www.alexandremattos.com.br/blog/wp-content/uploads/2010/02/times1.zip
Desculpe.
Att alexandre