Esse tutorial vai ensinar a vocês o básico do HTML.
O que é HTML?
De repente você já ouviu falar disso, mas nunca soube direito o que era, então vamos esclarecer um pouco:
HTMLHyper Text Markup Language, que significa Linguagem de Marcação de Hipertexto. Ou seja, uma linguagem de marcação, que é utilizada para criar páginas na internet e estruturá-las visualmente.

O código HTML é composto por várias tags, são elas que colocam o texto em negrito, itálico, sublinhado, centralizam imagens e/ou textos, entre outras funções.
O que são tags?
São estruturas de linguagem de marcação que consistem em breves instruções, tendo uma marca de início e outra de fim.

Por isso é importante sempre fechar a tag que você abrir – exceto as tags para pular linha e imagem, essas não precisam ser fechadas -, se não fechá-la o texto pode ficar desconfigurado e ter a forma que você queria/esperava.
Agora que já vimos a definição de HTML, vamos aprender a mexer com ele.
No seu computador, quando você quer pular para a linha de baixo o que se deve fazer? Apertar ‘Enter’, não é? Mas esse ‘Enter’ não adianta nada em páginas de internet, você precisa digitar o código <br> para que o efeito de ‘Enter’ aconteça.
Exemplo:

Eu e Maria não nos falamos desde o colegial. <br>
O que será que aconteceu com ela?Eu e Maria não nos falamos desde o colegial.
O que será que aconteceu com ela?

Se você quer que a linha de baixo não fique colada na de cima, e tenha o efeito de começo de parágrafo, coloque o <br> duas vezes.
Exemplo:

Eu e Maria não nos falamos desde o colegial. <br><br>

O que será que aconteceu com ela?

 

Eu e Maria não nos falamos desde o colegial.

O que será que aconteceu com ela?

Muito bem, agora que já aprendemos a pular linha, vamos ver como deixamos algo em negrito. O código do negrito é bem simples; e
Exemplo:

Ele disse que eu seria <b>para sempre</b> seu amor.

 

Ele disse que eu seria para sempre seu amor

Simples, não? Então vamos ver mais coisas!
Para deixar em itálico, é quase o mesmo que o negrito, só que trocamos a letra ‘b’ pela ‘i’, e o código fica <i> e </i>
Exemplo:

Seu amor era uma mentira, não entendo como ele me trocou por <i>aquela
lá</i>. 

Seu amor era uma mentira, não entendo como ele me trocou por
aquela lá.

Lembre-se de sempre fechar o código.

Para sublinhar algo, trocamos a letra por ‘u’, <u> e </u>

<u>Ele me beijou</u>, e parecia que todos os presentes na festa já não estavam lá, apenas nós dois e o nosso amor.

 

Ele me beijou, e parecia que todos os presentes na festa já não estavam lá, apenas nós dois e o nosso amor

Até aqui aprendemos a mexer no texto, mas… Como colocar imagens em uma página? É bem fácil.
O primeiro passo é hospedar a imagem em um site como o Photobucket ou ImageShack.

Clique aqui para saber como se cadastrar no ImageShack e no Photobucket.
Depois de hospedada, você copia a URL, ou endereço da imagem.
O que fazer com essa URL? Copie o código abaixo e onde está escrito ‘URL’, cole a mesma.

<img src=”URL”>

Para a imagem não ficar grudada em um canto ou em outro, precisamos centralizá-la, usando as tags
<center> e </center>
Exemplo:

<center>< img src=”URL”>

</center>

Para colocar um link em uma palavra, você terá que pôr o código abaixo, mas substituindo onde está escrito ‘link’ pelo link da fic ou site, e ‘nome’ pelo que você quer que apareça escrito para clicarem.

<a target=”blank” href=link>nome</a>

E chegamos à parte mais importante, a montagem do código.
Para começar a montar tudo isso que aprendemos, temos que iniciar com a tag <html> e finalizar com </html>, que indicam que o conteúdo encontra-se codificado em HTML.
Entre essas duas tags, temos todas as outras, a próxima é a <head> e </head>, e o que ficar entre elas será o cabeçalho. Sendo assim, temos até agora:

<html><head>Este é meu cabeçalho</head>

</html>

Agora teremos as tags <title> e </title>, que indicarão o título do seu documento/o nome da sua fic e as tags <body> e </body> que devem ficar no meio de tudo, pois o restante do documento deverá ficar entre elas.
Como estamos até agora:

<HTML><HEAD>

<TITLE> Este é meu título </TITLE>

</HEAD>

<BODY>

Aqui ficarão as coisas que você quer colocar na página.

</BODY>

</HTML>

A arrumação deverá ficar exatamente nessa ordem, senão dará errado.

Recomendamos:

Tutorial de Português
Como colocar comentários na fic
Como habilitar script
Como hospedar fotos
Como scriptar

Copyright © 2009-2014 Fanfic Obsession, All Rights Reserved.