[TUTORIAL] Estrutura de uma página HTML
2 participantes
Página 1 de 1 • Compartilhe
[TUTORIAL] Estrutura de uma página HTML
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
Estrutura de uma página HTML
1º - As páginas HTML:
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". |
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) |
Propriedades do código sendo fechado | |
</html> | |
</head> | |
</title> | |
</body> |
<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:
Todo CSS deve estar dentro da tag style, por exemplo:<style></style>
Temos que aplicar esse código entre as tags <head></head> e de preferencia abaixo da tag de título da página:<style> .seletor {
Propriedades;
}<style>
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".<html>
<head>
<title></title>
<style> .seletor {
Propriedades;
}<style>
</head>
<body>
</body>
</html>
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:
Atributos de ligação externa:<html>
<head>
<title></title>
<script></script>
</head>
<body>
</body>
</html>
Para convocar scripts e styles de sites externos a sua página HTML, basta você criar um link. Ou seja:
Os dois não são iguais, porém podem ser adicionados entre as tags <head></head>.<script type="text/javascript" src="ENDEREÇO_DO_LINK_JAVASCRIPT"></script>
<link rel="stylesheet" href="ENDEREÇO_DO_LINK_CSS" type="text/css" />
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:
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:class="NOME_DA_CLASSE"
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>.<html>
<head>
<title></title>
<style> .homepage {
Propriedades;
}<style>
</head>
<body>
<div class="homepage">CONTEÚDO</div>
</body>
</html>
- 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 |
[TUTORIAL] Estrutura de uma página HTML
Versão em Vídeo:
Tópicos semelhantes
» Estrutura em pagina html
» [TUTORIAL] Página de testes HTML
» [TUTORIAL] Login e senha para ver página HTML
» Declaro Urgência Help HTML ( Colocar vídeo para tocar automaticamente quando abrir a página de entrada do fórum em HTML Preciso do códico em HTML
» Estrutura da página
» [TUTORIAL] Página de testes HTML
» [TUTORIAL] Login e senha para ver página HTML
» Declaro Urgência Help HTML ( Colocar vídeo para tocar automaticamente quando abrir a página de entrada do fórum em HTML Preciso do códico em HTML
» Estrutura da página
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos