LO

Aula 1 - Tags? Cabeçalhos, parágrafos, links e imagens!

Por Lordfire, 22 de jan. de 2013 em Tutoriais de Websites

cabeçalho
parágrafo
link
imagem
tag
otserv
tibia
script
44
27.8k
AlexandreKGA
23 de janeiro de 2013 às 01:35

Gente usem o NotePad++ é o mais aconselhavel para editar PHP.

Se quiserem tem um PHPEditor também.

PuricuteP
23 de janeiro de 2013 às 12:15
<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>

AlexandreKGA
23 de janeiro de 2013 às 13:40

-Puricate

 

Bela demonstração do que aprendeu usou tudo bem organizado.

23 de janeiro de 2013 às 14:10

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

 

http://www.peuretry.xpg.com.br/

Editado Janeiro 23 por pobredobrega

AlexandreKGA
23 de janeiro de 2013 às 14:28

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

23 de janeiro de 2013 às 14:41

Mozark ve se ficou bom agora, olha no que postei, ou aqui

 

http://www.peuretry.xpg.com.br/

AlexandreKGA
23 de janeiro de 2013 às 15:18

Sim,amigo agora ficou melhor.

 

Se quiser poderia adicionar um negrito ali nas palavras:

 

Nome:

Idade:

Localização:

 

Para destacar o assunto!

23 de janeiro de 2013 às 17:53

E esse negrito adiciono como

BernardoB
23 de janeiro de 2013 às 21:08

pode usar <b></b> ou fazer <p style="font-weight:bold">

Tem outros jeitos, mas esses dois são bem simples.

23 de janeiro de 2013 às 21:14

ok, vlw, jaja passo como ficou

LordfireL
24 de janeiro de 2013 às 01:07

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

JDetonadosJ
24 de janeiro de 2013 às 03:57

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

BernardoB
24 de janeiro de 2013 às 12:51

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

JDetonadosJ
24 de janeiro de 2013 às 13:28

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

BernardoB
24 de janeiro de 2013 às 13:40

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.