Aprendendo HTML Básico

Coluna por: May Espadaro e Lilá


Oi, galera do lado negro da força! Hoje eu apareci por aqui para ensinar um pouco de HTML para vocês. Digo logo, vou ensinar o só o básico, minhas lições não passarão de como deixar uma fic bonitinha. Nada de ensinar a fazer layouts, CSS e coisas complicadas, em primeiro lugar porque os sites não costumam aceitar que as páginas das fic sejam muito elaboradas. E em segundo lugar, porque eu quero ensinar de um jeito que vocês aprendam com facilidade. Fique claro que o objetivo da coluna não é fazer ninguém se descabelar para aprender HTML, muito menos continuar se descabelando quando for arrumar o HTML da fic. Então aqui vão algumas lições básicas de elementos que você pode (e em alguns casos deve) fazer uso na sua fic.

Muita gente deve estar lendo e começando a criar dúvidas, então antes de começar a introduzir loucamente os códigos, vou esclarecer as coisas.

- O que é HTML?

O HTML é a linguagem utilizada para produzir páginas da Web. Relaxem, o HTML básico não é de outro mundo. Na verdade, nós só usaremos um pequeno número de códigos para dar cor, tamanho e estilo a fonte da fic, além de alinhamento e outras coisinhas.

- Eu preciso de um programa especifico para editar o HTML da minha fic?

Não precisa. Apesar de muitos programas ajudarem na edição de HTML, no caso das fics é tão fácil que eu garanto que logo você já vai ter até decorado os códigos. Para editar o HTML da fic, o bloco de notas vai ser seu melhor amigo. Abra-o agora e vamos começar a aprender.

Salvando em HTML


Muita gente já veio me perguntar como se salva um arquivo em HTML, e a verdade é que é beeem simples. Quando você for salvar a fic no bloco de notas, no nome do arquivo você acrescenta .HTML

Exemplo:

minhafic.HTML

Atenção: Não use espaços, acentos ou ç no nome. Certo?

Códigos gerais


Todos os arquivos HTML devem ter esses códigos. Sem exceção!
Tipo de Documento - <HTML></HTML> (início e fim de arquivo)
Cabeçalho (Header) - <HEAD></HEAD> (Informação descritiva, como o título,etc. Não é exibida. ) Titulo - <TITLE></TITLE> (deve estar entre o <head> e o </head>. É exibido no topo da janela, em geral o nome da sua fic)
Corpo - <BODY></BODY> (o conteúdo da página a ser exibido)

Então, para começar, o seu arquivo deve estar assim:
<HTML>
<head>
<title> NOME DA MINHA FIC </title>
</head>
<body>

A fic vai aqui :D

</body>
</HTML>

Aparência do texto


Negrito (Bold) - <B></B>
Itálico (Italic) - <I></I>
Sublinhado (Underline) - <U></U>
Centralizar (Center) - <CENTER></CENTER> (tanto para textos, quanto para imagens)
Fonte Grande (Large Font Size)- <BIG></BIG>
Fonte Pequena (Small Font Size) - <SMALL></SMALL>

O texto que você quer fomatar deve estar entre as tags. Exemplo:

<b>All About Fic</b>

Tamanho da fonte (Font Size) - <FONT SIZE="?"></FONT> (substitua o ? por um valor, sendo que 3 é o tamanho normal da fonte)

Cor da fonte (Font Color) - <FONT COLOR="#$$$$$$"></FONT> (você deve substituir o #$$$$$$ por uma em hexadecimal, você pode consultar as cores através desta tabela)
Tipo de Fonte (Select Font) - <FONT FACE="***"></FONT> (substitua o *** pelo nome da fonte, como tahoma, verdana, etc)

Exemplo:

<FONT SIZE="4"> <FONT COLOR="#00BFFF"> <FONT FACE="verdana"> All About Fics </font>

Imagens


Colocar imagens - <img border="0" src="http://tinypic.com"> (o link da imagem deve ficar no lugar do http://tinypic.com, e a imagem deve estar hospedada em algum servidor para aparecer. Recomendo o tinypic)

Links


Hyperlink - <a href="http://endereçoaqui.com.br" target="_blank"> mensagem para aparecer aqui </a>
E-mail - <a href="mailto:meuemail@gmail.com"> Meu nome</a>

Linha


Sabe aquela linha que divide a página horizontalmente? Geralmente, alguns autores usam-na para separar o capítulo da fic da N/A.
O código para ela é simples: <hr>. Basta colocá-lo onde desejar que a linha apareça.
Para colori-la, uso o seguinte código: <hr style="color:#$$$$$$">, substituindo ‘$$$$$$’ por um número hexadecimal, fazendo uso da tabelinha.

Bom, espero que no final da aula vocês tenham aprendido o básico de HTML sem ficarem nem um fio de cabelo mais carecas ;D

Publicada em: 4 de Fevereiro de 2010

Voltar para o menu de colunas