<h2>Tarefa 1 - Página Simples</h2> <h4>Informações Básicas</h4> Nome: Marina <br/> Idade: 20 <br/> Data de Nascimento: 28/06/1992 <br/> Localização: Santos - SP <br/> About: Eu jogo <a href="http://www.travian.com.br/?uc=brx_1126&signup" name=facebook>Travian</a>, não Tibia. <p><img src="http://i.imm.io/TC3l.png" alt="Sign que a WHAT fez."/> </p>
- Fórum
- OTServ
- Tutoriais
- Tutoriais de Websites
- Aula 1 - Tags? Cabeçalhos, parágrafos, links e imagens!
Aula 1 - Tags? Cabeçalhos, parágrafos, links e imagens!
Por Lordfire, 22 de jan. de 2013 em Tutoriais de Websites
info
Grupo: Artesão
Registrado: 14/11/12
Posts: 139
Reputação: +1
Char no Tibia: Lord Canopus

info
Grupo: Marquês
Registrado: 29/10/11
Posts: 1.2k
Reputação: +134
Gênero: Masculino

-Puricate
Bela demonstração do que aprendeu usou tudo bem organizado.
info
Grupo: Artesão
Registrado: 20/11/12
Posts: 112
Reputação: +4

Bom consegui fazer segue como ficou
<html> <h1>Sobre eu, tarefa 1.</h1> <h3>Informações básicas</h3> Nome:Pedro Santana </br> Idade: 13 anos </br> Localização: Bom mora na bahia, em Vitoria da Conquista </br> Quando nasci: 12/04/1999 <p>Estou nesse projeto<a href="http://www.facebook.com/Caos.Server">Pokemon Caos</a></p> <h4> Minha segunda Sprite</h4> <p><img src="http://i.imgur.com/xWyxXmW.png" alt="Minha nova sprite"></p> </html>
Como ficou
Editado Janeiro 23 por pobredobrega
info
Grupo: Marquês
Registrado: 29/10/11
Posts: 1.2k
Reputação: +134
Gênero: Masculino

-pobredobrega
Procure nao usar muito header dentro do codigo,procure usar um h3 encima.E depois usar fonte normal,melhora um pouco a formatação.
info
Grupo: Artesão
Registrado: 20/11/12
Posts: 112
Reputação: +4

info
Grupo: Marquês
Registrado: 29/10/11
Posts: 1.2k
Reputação: +134
Gênero: Masculino

Sim,amigo agora ficou melhor.
Se quiser poderia adicionar um negrito ali nas palavras:
Nome:
Idade:
Localização:
Para destacar o assunto!
info
Grupo: Artesão
Registrado: 20/11/12
Posts: 112
Reputação: +4

E esse negrito adiciono como
pode usar <b></b> ou fazer <p style="font-weight:bold">
Tem outros jeitos, mas esses dois são bem simples.
info
Grupo: Artesão
Registrado: 20/11/12
Posts: 112
Reputação: +4

ok, vlw, jaja passo como ficou
info
Grupo: Lenda
Registrado: 03/10/06
Posts: 2.6k
Reputação: +309
Gênero: Masculino
Char no Tibia: Knight Orion

Todos ficaram certos, tags usadas corretamente (Y)
O bom do HTML é que é só abrir o arquivo pra ver o resultado!
Editado Janeiro 24 por Lordfire
info
Grupo: Campones
Registrado: 19/08/12
Posts: 15
Reputação: 0

Primeiramente, siim eu so mto burro AIUEHIUAE então n repare nas minhas perguntas '-'!
aeew muito boa a aula ^^! Mas tive uns probleminhas aqui, não saiu bem como eu queria.
Vamos as dúvidas primeiro.
1ª Porque quando se usa <h1> até o <h6> a palavra fica em negrito automaticamente? Como eu uso <h1> até o <h6> sem que a palavra fique em negrito?
2ª Porque esta tag <br /> usa a barra depois e não antes(</br>) como todas as outras??
3ª Existe uma ordem das tags serem executadas primeiro? Tipo, eu não posso usar <b><h1> oi</b></h1> e tenho que usar <h1><b>oi</h1></b>. Não necessariamente essas tags mas em todas do html.
4ª Ao clicar em um link, como faço para que ele abra em outra aba ou em uma nova janela do navegador?
5ª Como faço pra quando eu clicar no link abrir várias páginas de diferentes sites? Tipo aqueles sites de filmes online, você clica num link e abre 3 páginas de spam ahahaha
6ª Tive a impressão que o <p> da um espaço mais que o <br> estou certo?
Agora aos probleminhas que eu tive.
eu usei o seguinte código:
<center><h1>Minhas Informações</h1></center>
<br>
<b><h2>Nome:</h2></b> <h3>Luis</h3>
<b><h2>Idade:</h2></b> <h3>22</h3>
Ficou assim:
Minhas Informações
Nome:
Luis
Idade:
22
Mas a minha intenção fosse que ficasse assim:
Minhas Informações
Nome: Luis
Idade: 22
Você pode explicar melhor essa parte:
Tomem cuidado com os cabeçalhos: embora pra quem veja não há muita diferença, eles são muito utilizados por ferramentas de busca, ou seja, o Google sempre procura e dá destaque para os cabeçalhos na hora de indexar as páginas, portanto não utilizem só pra mudar o tamanho do texto!
Isso tem haver com aquelas técnicas (black hat) que os cara usam pra sempre ta em primeiro no google ? Que a palavra fica oculta e o google lê ela por diversas vezes
Editado Janeiro 24 por JDetonados
1. As tags <hX> representam cabeçalhos, e portanto são destacadas automáticamente. Que não quiser que elas estejam em negrito, pode usar CSS:
<h1 style="font-weight:300">Oi</h1>
Font-weight:300 representa uma letra considerada "normal" na tipografia.
__________________________________________________________________________________________
2. A nomenclatura comum é "<abc> </abc>", mas a tag <br> não tem conteúdo, ou seja, ela não possui nada dentro. Portanto, você pode fechá-la de uma vez só, assim:
Oi oi oi oi oi <br /> Oi oi oi oi oi
Dessa forma, o código vai ter duas linhas.
__________________________________________________________________________________________
3. Essa ordem deve ser respeitada simplesmente por ORGANIZAÇÃO do seu código. Os dois códigos abaixo fazem a mesma coisa, mas o primeiro código abre e fecha as tags na mesma ordem. Você pode acabar esquecendo de fechar alguma tag...
<a href="x.html"><h1><b>Código organizado</b></h1></a>
<b><a href="x.html"><h1>Código desorganizado</b></h1></a>
__________________________________________________________________________________________
4. Isso é fácil, mas ainda vão explicar. Mas é mais ou menos assim:
<a href="link.html" target="_blank">Âncora</a>
A propriedade target indica onde o navegador vai abrir esse link.
__________________________________________________________________________________________
5. Acho que só por javascript... Depois tu vê isso, mas não é muito difícil não.
__________________________________________________________________________________________
6. <p> dá um espaçamento de parágrafo. Representa uma linha a mais, sim.
O espaço do <p> representa o uso de dois <br />
Editado Janeiro 24 por Bernardo
info
Grupo: Campones
Registrado: 19/08/12
Posts: 15
Reputação: 0

Obrigado pelo esclarecimento XD! Só não do rep pq já dei pro dono do tópico hoje ;/
Só a 2ª que eu acho que vc entendeu errado. Eu queria saber pq a barra que fecha é depois e não antes.
Editado Janeiro 24 por JDetonados
Acho que entendi
As tags comuns, como por exemplo "<p>", têm conteúdo. O conteúdo delas é geralmente um texto, então fica:
<p> texto texto texto </p>
A tag <br>, no caso, não tem conteúdo nenhum, você não bota nada entre <br> e </br>
Logo, criaram uma nomenclatura mais fácil pra tag. Ao invés de escrever <br></br> toda hora, você pode simplesmente escrever <br />. Fazendo isto, você está abrindo e fechando a tag ao mesmo tempo.






info
Grupo: Marquês
Registrado: 29/10/11
Posts: 1.2k
Reputação: +134
Gênero: Masculino
Gente usem o NotePad++ é o mais aconselhavel para editar PHP.
Se quiserem tem um PHPEditor também.