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