[TUTORIAL] Estrutura de uma página HTML

por Thoth 15.06.14 1:41

Estrutura de uma página HTML

Neste tutorial vamos indicar como construir sua página HTML personalizada com segurança e sem erros. Alguns administradores criam suas páginas e não verificam se as mesmas tem erros ou bugs, e por isso, alguns detalhes serão esinados.

--> Tutoriais <--
Estrutura de uma página HTML

1º - As páginas HTML:

(carregue na imagem para aumentar)

[TUTORIAL] Estrutura de uma página HTML 210

[TUTORIAL] Estrutura de uma página HTML 110111

[TUTORIAL] Estrutura de uma página HTML 398853

Título - Neste campo terá de adicionar um título para a sua página HTML, servirá para identificar a sua página na lista de páginas HTMl, do Painel de Cntrole, e fará também parte do endereço da página. Por exemplo:Título: ForumeirosEndereço da página: .../forumeiros-h1.html

[TUTORIAL] Estrutura de uma página HTML Warning

ATENÇÃO:
A designação que aparece à frete do nome da página, no endereço,
modifica consoante a número da página criada. Se for a primeira página a
ser criada, então será -h1, se for a quarta página a ser criada será
-h4, etc.

[TUTORIAL] Estrutura de uma página HTML 110210

Você deseja utilizar o início e o final da página do seu fórum? - Se optar pelo "Sim",
a sua página apresentará o cabeçalho (Logo e menu do Fórum) e o rodapé (barra de links úteis). Uma das vantagens desta escolha, é que terá de personalizar menos o seu texto, por exemplo, pois, poderá utilizar as
classes CSS, do seu próprio Fórum, e também não necessita de criar uma estrutura HTML, apenastem de adicionar o código de conteúdo. Se optar pelo "Não" a página torna-se independente da estrutura do Fórum, mas neste caso terá de adicionar a própria estrutura, com as balizas html, head, body, etc.

[TUTORIAL] Estrutura de uma página HTML 110310

Usar esta página como página inicial? - Se pretende que a página seja utiliza como a página inicial do Fórum, deverá colocar "Sim", mas se optar por esta opção, terá de adicionar o endereço do site Forumeiros.com. (ver FAQ)

[TUTORIAL] Estrutura de uma página HTML 110410

Código HTML - Neste campo, terá de adicionar o conteúdo da sua página HTML, se colocou não na opção 2, então terá de criar uma estrutura de uma página HTML.

[TUTORIAL] Estrutura de uma página HTML 110510

Confirmar / Previsualizar - Nestes dois botões poderá confirmara criação da sua página HTML, carregando em "Confirmar". Ou poderá visualizar o resultado que a página terá quando ele for visualizada por todos os usuários, carregando em "Previsualizar".

2º - Os códigos HTML:
Antes de iniciar você deve saber o que fazer, então temos que entender passos sobre esse projeto.

Propriedades
<html>	Inicia uma página HTML (Obrigatório).
<head>	Inicia um cabeçalho (Obrigatório).
<title>	Inicia um título para a página.
<body>	Inicia o corpo da página (Obrigatório)

É claro, toda tag qué aberta deve ser fechada, por isso você só precisa repetir o mesmo código e colocar uma barra antes do nome do código. Exemplo:

Propriedades do código sendo fechado
</html>
</head>
</title>
</body>

Alguns exemplos de fechamento correto:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

3º - Outros atributos em uma página html:
Partimos então para um nível mais difício das páginas HTML. Como ensinado acima, toda página HTML é iniciado por <html> e finalizada por ela mesma, só que com uma barra antes do nome html. Agora, vamos mostrá-los onde aplicar os códigos mais complexos, como CSS, Scripts e as Classes para funcionar com o CSS de personalização.

Muitos administradores querem aplicar o CSS e ir direto ao assunto, mas antes disso você precisa entender que para o CSS funcionar, temos que adicionar o atributo class. Onde aplicar o CSS na página HTML? Agora, você vai conhecer as tags:

<style></style>

Todo CSS deve estar dentro da tag style, por exemplo:

<style> .seletor {
Propriedades;
}<style>

Temos que aplicar esse código entre as tags <head></head> e de preferencia abaixo da tag de título da página:

<html>
<head>
<title></title>
<style> .seletor {
Propriedades;
}<style>
</head>
<body>
</body>
</html>

Se você adicioná-las fora do lugar, não tem problema. Como assim? Não tem problema porque o CSS está dentro da tag style, mesmo assim quando você abrir o seu CF (código fonte) verá que há linhas em vermelhas, o que indica que está incorreto! Para chamar o efeito do CSS, você precisa colocar outra tag HTML que explicaremos no passo "NÚMERO DO PASSO".

Scripts:
O mesmo que é feito com a tag style pode ser feito com o <script></script>. Os Scripts geralmente são famosos por gerir efeitos, e por isso tem o seu lugar na página HTML como styles e divs. Deve ser colocada entre as tags <head></head>, por exemplo:

<html>
<head>
<title></title>
<script></script>
</head>
<body>
</body>
</html>

Atributos de ligação externa:
Para convocar scripts e styles de sites externos a sua página HTML, basta você criar um link. Ou seja:

<script type="text/javascript" src="ENDEREÇO_DO_LINK_JAVASCRIPT"></script>
<link rel="stylesheet" href="ENDEREÇO_DO_LINK_CSS" type="text/css" />

Os dois não são iguais, porém podem ser adicionados entre as tags <head></head>.

4º - DIV class:
As div class devem ser colocadas dentro da tag <body></body>. As tags body como já diz o seu próprio nome, significa "Corpo" e é onde vamos adicionar todo elemento da página, ou seja, td, tr, table, tbody, th, h1, font, script, css e etc. A ligação de uma tag HTML com CSS é simples, basta você criar um código html mais o nome:

class="NOME_DA_CLASSE"

O valor em Azul Forumeiros é a classe que vamos usar para pegar o CSS dentro das tags <style></style> antes do </head>. Vamos citar um exemplo pronto abaixo:

<html>
<head>
<title></title>
<style> .homepage {
Propriedades;
}<style>
</head>
<body>
<div class="homepage">CONTEÚDO</div>
</body>
</html>

Depois disso, as propriedades que aplicamos no CSS estará no nome dentro da tag DIV, porque nós pedimos para essa DIV copiar as propriedades do CSS aplicado entre as tags <style>.

Onde posso encontrar cursos de HTML?
Pesquise no Google e encontre os maiores e melhores sites de ensino sobre o assunto.
Posso adicionar Script dentro da tag <body>?
Sim. Como dito, depois da tag body você pode adicionar vários atributos como td, tr, table, tbody, th, h1, font, script, css e etc, todavia, aconselhamos que procure sempre o local correto para adicionar os códigos, para evitar problemas técnicos na página.
Linkei uma página JS, mas não funcionou. Por quê?
Não é bem assim, todos os códigos funcionam mas isso depende de que Javascript é esse. O que determina se o código vai funcionar ou não, não é a tag em si e sim o conteúdo que terá dentro da tag script. Por isso, verifique se o código realmente é necessário na página.
Lnkei uma página CSS, mas não funcinou. Por quê?
Não é bem assim, todos os códigos CSS funcionam se houver algum código dentro do body chamando por ele, como citado no quarto (4º) passo.

[TUTORIAL] Estrutura de uma página HTML Act_bottom

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Estrutura de uma página HTML

por Shek 20.06.14 23:22

Versão em Vídeo: