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

[Lordfire 309]

O conteúdo de uma página HTML é feita de textos e referências (o que é chamado de hipertexto) marcados por tags (etiquetas). As etiquetas são o que fazem o HTML ser mais do que apenas texto corrido. Uma tag tem a seguinte estrutura:

<abre tag>conteúdo</fecha tag>

Isso é um elemento, o conjunto inteiro desde a abertura de uma tag até o seu fechamento. Repare que a abertura de uma tag e o fechamento são iguais, exceto que o fechamento tem uma barra antes.
Geralmente não há diferença na caixa, ou seja, pode se escrever <TAG>, <tag> e <Tag> para obter o mesmo resultado, mas a recomendação oficial é de se usar apenas letras minúsculas, e esse será o padrão deste curso.

Alguns exemplos de elementos estão a seguir:
<p>Isto é um parágrafo</p>
<a href="ajuda.php">Link para a página ajuda</a>
<br>

Também é possível colocar um elemento dentro de outro, mas lembre-se de fechar na ordem!

<p><a href="http://xtibia.com">Clique aqui</a> para acessar o XTibia.</p>
 

Cabeçalhos

O HTML dispõe de uma série de cabeçalhos para organizar o texto. Eles vão desde o <h1> até o <h6>, quanto menor o número, maior a importância. Veja um exemplo de como utilizar os cabeçalhos:
 

<h1>Como criar um OTserv</h1><h2>Fazendo o download</h2>Acesse o site www.xtibia.com e procure a seção de downloads. Baixe um servidor e extraia.<h2>Configurando o servidor</h2><h3>Arquivo config</h3>No arquivo config ficam as configurações principais do servidor. Veja algumas delas:<h4>Mudando o IP</h4>Para mudar seu IP altere a configuração "ip" para seu IP disponível em www.meuip.com.br<h4>Mudando as rates</h4>Para mudar as rates altere os seguintes valores:<h5>expRate</h5>O expRate altera o multiplicador de experiência, quantas vezes mais de exp as criaturas dão.<h6>Stages</h6>Os stages também podem alterar o multiplicador de experiência para certos levels.<h5>skillRate</h5>O skillRate altera o multiplicador das skills, quantas vezes mais rápido vai subir.<h5>lootRate</h5>O lootRate altera o multiplicador do loot, quantas vezes mais fácil é dropar os loots.<h3>Scripts</h3>Scripts adicionam funções ao seu servidor. Para instalar vá ao XTibia e procure na seção.<h2>Colocando online</h2>Se você configurou corretamente basta abrir o .exe da pasta inicial e seu servidor estará online.Obrigado por ler o tutorial.

Este código produz a seguinte página:

Atenção: NÃO use cabeçalhos pra fazer o texto ficar maior ou destacado. Ele é feito para ser, exclusivamente, um cabeçalho. Mais a frente estudaremos como enfasar texto e mudar estilo.
 

Quebras de linha

Se você foi um bom observador, percebeu que, no exemplo acima, as duas últimas linhas se tornaram uma só. Isso porque o HTML torna múltiplos espaços, quebras de linha e outros como um simples espaço. Para forçar uma quebra de linha, devemos usar o elemento <br />. Esta tag é vazia, ela não tem conteúdo e, por isso, não precisa ser aberta ou fechada, apenas ser escrita. Podemos mudar as frases para o seguinte, então:
 

Se você configurou corretamente basta abrir o .exe da pasta inicial e seu servidor estará online.<br />Obrigado por ler o tutorial.

 

Parágrafos

Uma solução alternativa para as quebras de linha é a utilização de parágrafos. Para fazer um parágrafo, use a tag <p> em volta do texto. Mais a frente sempre usaremos parágrafos para textos que não são cabeçalhos, então se acostume a usar textos dentro desta tag:
 

<h1>Como criar um OTserv</h1><h2>Fazendo o download</h2><p>Acesse o site www.xtibia.com e procure a seção de downloads. Baixe um servidor e extraia.</p><h2>Configurando o servidor</h2><h3>Arquivo config</h3><p>No arquivo config ficam as configurações principais do servidor. Veja algumas delas:</p><h4>Mudando o IP</h4><p>Para mudar seu IP altere a configuração "ip" para seu IP disponível em www.meuip.com.br</p><h4>Mudando as rates</h4><p>Para mudar as rates altere os seguintes valores:</p><h5>expRate</h5><p>O expRate altera o multiplicador de experiência, quantas vezes mais de exp as criaturas dão.</p><h6>Stages</h6><p>Os stages também podem alterar o multiplicador de experiência para certos levels.</p><h5>skillRate</h5><p>O skillRate altera o multiplicador das skills, quantas vezes mais rápido vai subir.</p><h5>lootRate</h5><p>O lootRate altera o multiplicador do loot, quantas vezes mais fácil é dropar os loots.</p><h3>Scripts</h3><p>Scripts adicionam funções ao seu servidor. Para instalar vá ao XTibia e procure na seção.</p><h2>Colocando online</h2><p>Se você configurou corretamente basta abrir o .exe da pasta inicial e seu servidor estará online.</p><p>Obrigado por ler o tutorial.</p>

Note que tanto usando a quebra de linha quanto colocando em diferentes parágrafos, este será o resultado:

 

Links

Links, como você já deve saber, são elementos que levam para outra página. No HTML eles se chamam âncoras, são representadas pela tag <a>, e podem ser usados de 3 formas:

Link absoluto
Um link absoluto é um link que leva exatamente para uma página. Por exemplo, você está na página www.meusite.com e quer criar um link para www.xtibia.com, então você faz da seguinte forma:

<a href="http://xtibia.com">Link para o XTibia</a>

Um link absoluto deve começar por um protocolo, seja "http://", "ftp://" ou outros que existem, ou então ele será tratado como link relativo.

Link relativo
Um link relativo leva para uma página usando o link da atual. Se você quer ir de www.meusite.com para www.meusite.com/pg2.html, pode usar o seguinte elemento:

<a href="pg2.html">Link para a página 2</a>

O conteúdo do atributo "href" é somado com o caminho até a página atual (excluindo o próprio nome da página), incluindo a barra. Ou seja, www.meusite.com/ + pg2.html. Você também pode usar múltiplas pastas:

<a href="plantas/arvores/carvalho.html">Link para a página sobre carvalhos</a>

www.meusite.com/ + plantas/arvores/carvalho.html = www.meusite.com/plantas/arvores/carvalho.html

Mas nada o impede de usar também links absolutos para ir para uma página dentro do mesmo site:

<a href="http://meusite.com/pg2.html">Link para a página 2</a>

Isto é exatamente igual ao primeiro exemplo de link relativo.

Âncoras
As âncoras servem para navegar por uma página. Sabe quando você clica no botão "Ir para o topo" em alguma página e ela sobe, ou então acessa um post específico de um tópico aqui no XTibia e a página vai automaticamente para este post? Isso é feito usando âncoras. Vamos supor que, no nosso exemplo do tutorial de colocar um OTserv online, nós queiramos fazer um botão de "voltar ao topo", então colocamos antes da primeira linha:

<a name="topo">

E, na última linha, colocamos este link:

<a href="#topo">

Então, ao clicar no link, vamos para o topo da página. Você pode colocar âncoras onde quiser, mas para chamá-las, deve usar o # (jogo da velha, hashtag) na frente.
Você também pode misturar as âncoras com os outros tipos de link. Vamos supor que eu queira colocar aqui no XTibia um link para a âncora #expRate em www.meusite.com/criar_ot.html, então eu faço o seguinte link:

<a href="http://meusite.com/criar_ot.html#expRate">expRates!</a>

 

Imagens

As imagens são representadas pela tag <img>, e o caminho para a imagem funciona igual ao href da tag <a>, mas se chama src. As tags de imagem não são de abrir e fechar, você deve utilizar a tag, colocar os atributos e fechar com o />, como a quebra de linha:

<img src="http://i.imgur.com/f1fNwaC.jpg" />

Ou, então, usando links relativos:

<img src="foto_minha.png" />

As imagens possuem o atributo alt, que serve para indicar um texto alternativo para mostrar caso a imagem não consiga ser carregada, mas a maioria dos navegadores também mostra esse texto quando você passa o mouse em cima da imagem:

<img src="foto_minha.png" alt="Eu na praia de Quixajuba" />

Sua tarefa desta primeira aula é criar uma página simples com suas informações básicas: nome, idade e/ou data de nascimento, localização, um pequeno texto sobre você, e quais mais informações você quiser colocar. Se preferir, não é necessário utilizar informações reais. Utilize pelo menos 2 cabeçalhos diferentes, um link, uma imagem, parágrafos nos textos e quebras de linha quando quiser.
 

 

 

 

[Piabeta Kun 359]

Muito bem explicado,fica ai o priemiro conteudo das aulas de websites!

 

Parabéns e bom estudo a todos!

[AlexandreKG 134]

Pela aula,myLord.

 

Excelente aula,tudo bem explicado.Facil de se entender,espero que todos entendam,as tags.Isso é importante.

[Bernardo 87]

<!DOCTYPE html>
<html>
<head> <title>Eu</title> </head>
<body>
<img src="eu.jpg" alt="EU COMENDO UMA EMPADA" /> <br />
<h1>Sobre mim</h1> <br />
<h3>Informacoes basicas</h3>
<p>OI EU SOU UM MENINO LEGAL QUE ADORA EMPADAS</p>
<b>Nome:</b> Bernardo <br />
<b>Idade:</b> 18 <br />
<b>Natural de:</b> Belo Horizonte <br />
<b>Interesses:</b> Empadas <br />
<br />
<h3>Contato</h3>
<p>ESTOU ONLINE 24H/7, PODE ME CHAMAR PRA FARRA</p>
<a href="http://facebook.com/meufacebook" name=facebook>Facebook</a> <br />
<a href="http://twitter.com/meutwitter" name=facebook>Twitter</a> <br />
<a href="http://meusite.com" name=facebook>Site</a> <br />
<br />
<h3>Olha essa piada que eu vou fazer agora</h3>
<br /> <br /> HUEHUEHUEHUE <br /> <br />
</body>
</html>

Editado Janeiro 22, 2013 por Bernardo

[Bloxx 15]

<html>
<h1>Sobre Eu</h1><br/>
<h3>Básico do Básico</h3><br/>
<p>Nome: Davi</p>
<p>Localização: Teresina - Piaui, Bairro Porto do Centro,Rua 13, Q-M,C-32<p/>
<p>Eu Gosto de: Basquete, Futebol, Tibia, OTServers...</p>
<img src="Foto123.jpg" alt="Rua Onde eu Moro"/>
<br/>
<h4>Contato</h4><br/>
<p>Facebook,MSN,Skype,Xat e etc</p>
</html>

[Plfmoura 6]

Ta básico mas é assim q se faz xD!

 

Uma ferramenta simples que eu utilizava era o FreshHtml; é um programa que você arruma a página do site sem precisar escrever TAGS...

[Você cria a cara do seu site (<body>,<title>,<div>,<img>, e etc... como se fosse um editor de imagens qualquer; "Paint" por exemplo... dae no final ele Gera as TAGS automaticamente, como a aula citada acima ]

mas isso é uma ferramenta para preguiçoso, a finalidade é aprender os códigos e seus fins.

 

Obs: Para ter algo mais organizado baixe um programa que já vem com a funcionalidade de separação de TAGS... "<>"

[pobredobrega 4]

Ae me explica uma coisa para fica um cabeçalho maior tem usar <h1> ...</h1>

 

é isso?

Editado Janeiro 23, 2013 por pobredobrega

[Lordfire 309]

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! Eu vou ensinar como fazer isso nas aulas de CSS.

 

Outra: por enquanto, eu não vou cobrar as tags de estrutura como <html>, <head> e <body>, então não precisa colocar

[DiogoTemporario 91]

Bom post. Porém antes de tudo poderia explicar <html> <head> <body> e charset, pois usando só as infos do tutorial não dá pra escrever nada com ç ou acento que buga por não ter charset definido. Sugiro a todos criarem uma página no xpg para testar os scripts btw.

 

A tarefa:

 

http://www.teste442.xpg.com.br/aulas/1/index.html

 

<html>
<head>
 <title>Sobre mim</title>
 <meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
</head>
<body>
 <h1>Sobre mim:</h1>
 <a name="Pessoal"><h2># Pessoal</h2></a>
 <p>Nome: Alef <br /> Sexo: Masculino <br /> Idade: 18 <br /> Residência: Rio Grande do Sul</p>
 <a name="Etc"><h2># Etc</h2></a>
 <p>Acho que deveríamos aprender listas e cabeçalhos o quanto antes</p>
 <a name="Foto"><h2># Foto</h2></a>
 <img src="img/Foto.jpg" alt="Eu."><br /><br />
 <p>Navegação: <a href="#Pessoal">Pessoal</a> <a href="#Etc">Etc</a> <a href="#Foto">Foto</a></p>
</body>
<html>

Editado Janeiro 24, 2013 por DiogoTemporario

[Kausen 47]

Bem explicado belo topico

Rep+

[DoGoZ 11]

O meu ficou assim '-'

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Informações sobre mim</title>
</head>
<body>
<h1>Sobre mim:</h1>
<h4>Nome:</h4>
<p>Diogo Antonio da Silva</p>
<h4>Idade:</h4>
<p>18</p>
<h4>Data de nascimento:</h4>
<p>07/07/1994</p>
<h4>Localização:</h4>
<p>Artur Nogueira - SP / Brasil</p>
<h4>Um pouco sobre mim</h4>
<p>Já entendo um pouco de HTML, uso dreamweaver, portanto isso foi muito fácil</p>
<hr />
<p><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTmA0DEVG2mELOTgYOoE9DdtBefC_XIJgZhO3h3zsEL1RZflO74cWsYhvLR" width="200" height="67" title="Hail xTibia ~~ Imagem por ZoDiAk" />
<p>Essa foi a Aula #1 de websites no <a href="http://www.xtibia.com">xTibia</a>!</p>
<p>Quer ver a aula? <a href="http://www.xtibia.com/forum/topic/205218-aula-1-tags-cabecalhos-paragrafos-links-e-imagens/">Clique Aqui</a>!</p>
</body>
</html>

 

Quer ver como ficou ?

 

 

 

 

Dica: Usem o dreamweaver, ele fecha as tags automáticamente.

 

Obrigado pela aula, queremos mais *.*

Editado Janeiro 23, 2013 por DoGoZ

[AlexandreKG 134]

Calma gente,isso é so o começo haverá muito mais aulas para voces,e entao nao fiquem falando a é muito basico,pois terá mais.

 

Eu darei suport as aulas,então as duvidas podem ser perguntadas a mim,se quiserem.

 

Abraços.

Atenciosamente,Mozark001.

[Bernardo 87]

Usar dreamweaver? Não é muito construtivo

[AlexandreKG 134]

Usar Dreamweaver ou não é uma escolha do aluno.Todos podem usar NotePad ++ que é um programa muito bom também.

[Lordfire 309]

Galera, não usem o dreamweaver ou qualquer outro "criador" de páginas! Eles vão criar mais do que vocês devem fazer, e embora isso facilite, é importante saber como fazer.