Pesquisar na Comunidade

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.