[TUTORIAL] Estrutura de uma página HTML

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Estrutura de uma página HTML

Mensagem por Thoth em 14/06/14, 09:41 pm



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



- As páginas HTML:
(carregue na imagem para aumentar)
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
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.
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.
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)
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.
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".
- 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>

- 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>.

- 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.





© Fórum dos Fóruns & Shek


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
avatar

Thoth
Usuário experiente

Masculino
Inscrito dia : 01/11/2011
Mensagens : 2154
Pontos Ativos : 2743

Ver perfil do usuário http://suportedesign.forumeiros.com https://www.facebook.com/Suportedesign https://twitter.com/suportedesign

[TUTORIAL] Estrutura de uma página HTML

Mensagem por Shek em 20/06/14, 07:22 pm

Versão em Vídeo:

avatar

Shek
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17363
Pontos Ativos : 21548

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum