HTML básico
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:
HTML – Hyper 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 |
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-2017 Fanfic Obsession, All Rights Reserved.
