Tutorial Iniciante de HTML: Exercícios

2 03 2008

Logo do +web em tons claros

Antes de avançar pro próximo assunto, é praticar mais um pouco o que você viu até agora.

O exercício é simples:

Crie um mini-site. Deve ter no mínimo quatro páginas. O tema é livre, você faz sobre o que quiser. O ideial é usar todos os elementos que você viu aqui – não esqueça que colocar um formulário e uma tabela. O formulário não precisa funcionar.

Não se preocupe ainda com a aparência do seu site. Isso vem depois. Mecha com tudo, e se tiver qualquer dúvida poste um comentário aqui ou entre em contato comigo.

Quando seu site estiver pronto, você pode salvar no seu computador ou – mais interessante – hospedar ele em algum serviço de hospedagem gratuita, pra ir vendo como essas coisas funcionam de verdade.

Quando estiver pronto, siga para a próxima parte: CSS.

Páginas Relacionadas

BlogBlogs Tags: , ,
Anúncios




Tutorial Iniciante de HTML: Juntando Tudo

2 03 2008

Código HTML

Se você estudou direitinho todas as páginas desse Tutorial Iniciante de HTML, você já deve ser um HTMLzeiro competente.

Pra falar a verdade, como muita gente que usa o HTML usa muito mal, você deve ser melhor que a maioria.

O código a seguir incorpora tudo que já foi explicado nas páginas anteriores:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Minha primeira página web</title>
<!-- Isso é um comentário -->
</head>

<body>
<h1>Minha primeira página web</h1>
<h2>O que é isso?</h2>
<p>Uma página simples feita usando HTML. <strong>Só pra mostrar pra todo mundo o que eu aprendi.</strong> Agora eu sei que HTML é simples e fácil. Qualquer um pode aprender.</p>
<h2>Pra quê isso?</h2>

<ul>
<li>Pra aprender HTML</li>
<li>Pra exibir
<ol>
<li>Pro meu chefe</li>
<li>Pros meus amigos</li>
<li>Pro meu gato</li>
<li>Pro pequeno pato falante na minha cabeça</li>
</ol>
</li>
<li>Porque eu me apaixonei pelo meu computador e quero dar a ele um pouco de amor HTML.</li>
</ul>

<h2>Onde encontrar esse tutorial</h2>
<p><a href="http://www.htmldog.com"><img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" /></a></p>
<h3>Uma tabela qualquer</h3>
<table border="1">
<tr>
<td>Linha 1, célula 1</td>
<td>Linha 1, célula 2</td>
<td>Linha 1, célula 3</td>
</tr>
<tr>
<td>Linha 2, célula 1</td>
<td>Linha 2, célula 2</td>
<td>Linha 2, célula 3</td>
</tr>
<tr>
<td>Linha 3, célula 1</td>
<td>Linha 3, célula 2</td>
<td>Linha 3, célula 3</td>
</tr>
<tr>
<td>Linha 4, célula 1</td>
<td>Linha 4, célula 2</td>
<td>Linha 4, célula 3</td>
</tr>
</table>

<h3>Um formulário qualquer</h3>
<p><strong>Nota:</strong> Parece o máximo, mas não faz absolutamente nada.</p>
<form action="algumscript.php" method="post">
<p>Nome:</p>
<p><input type="text" name="nome" value="Seu nome" /></p>
<p>Comentários: </p>
<p><textarea rows="10" cols="20" name="comentarios">Seus comentários</textarea></p>
<p>Você é:</p>
<p><input type="radio" name="vocee" value="homem" />Homem</p>
<p><input type="radio" name="vocee" value="mulher" />Mulher</p>
<p><input type="submit" value="Enviar"/></p>
<p><input type="reset" value="Limpar"/></p>
</form>
</body>
</html>

Aí está. Salve o arquivo e brinque com ele. Mude valores, tire e adicione coisas – é o melhor jeito de entender como tudo funciona. Vá em frente.

Vai ser difícil continuar se você não tiver aprendido direitinho tudo o que a gente viu aqui. Se tiver alguma dúvida, entre em contato ou deixe um comentário.

Páginas Relacionadas

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Iniciante de HTML: Formulários

2 03 2008

image

Formulários podem ser usados para enviar dados pela web. Freqüentemente são usados como formulários de contato para converter informação inserida por um usuário em um email, como esse.

Sozinhos, formulários são inúteis. Eles precisam estar ligados a um programa que irá processar os dados inseridos pelo usuário. Esses programas podem ser feitos de muitas formas e estão fora do escopo desse minicurso. Se você mantém seu site em um serviço de host (como o 000webhost), eles vão poder te ajudar com isso e provavelmente te dar instruções claras e simples de como, por exemplo, fazer um formulário “formulário-para-email” funcionar.

As tags básicas usadas num formulário HTML são form, input, textarea, select e option.

Form define o formulário. Dentro desta tag existe um atributo obrigatório, o action, que diz o endereço do programa para onde os dados do formulário serão enviados.

O atributo opcional method diz a forma em que o formulário será enviado, e pode ter o valor get (que é o default) ou post. Freqüentemente usa-se post que esconde a informação (get manda a informação através da URL). Leia mais sobre esses métodos de requisição.

Um elemento form vai se parecer com isso:

<form action="script.php" method="post"></form>

A tag input é a “mãezona” no mundo dos formulários. Ela pode ter dez formas, mostradas abaixo:

  • <input type=”text”/> é a caixa de texto padrão. Ela também pode ter uma atributo value, que define o valor inicial da caixa de texto.
    Exemplo de input type=Textbox
  • <input type=”password”/> é similar à caixa de texto, mas o que for digitado pelo usuário não vai ser visível.
    Exemplo de input type=password
  • <input type=”checkbox”/> é uma checkbox, que pode ser marcada e desmarcada pelo usuário. Ela pode ter um atributo checked, usado no formato <input type=”checkbox” checked=”checked” />, que faz com que o estado inicial do checkbox seja estar marcado.
    Exemplo de input type=Checkbox
  • <input type=”radio”/> é similar a um checkbox, mas o usuário só pode selecionar um radio button em um grupo. Um grupo de radio buttons é definido pelo atributo name – radio buttons com o valor de name igual pertencem ao mesmo grupo. Também pode ter um atributo checked, usado do mesmo modo que no checkbox.
    Exemplo de input type=Radio
  • <input type=”file”/> é uma campo que permite procurar e escolher um arquivo em seu computador, como você vê quando abre ou salva um documento na maioria dos programas, e é usado para permitir ao usuário fazer upload de arquivos.
    Exemplo de input type=File
  • <input type=”submit”/> é um botão que quando clicado envia o formulário. Você pode controlar o texto que aparece no botão de enviar (como você pode fazer com os tipos button e reset – veja abaixo) com o atributo value, por exemplo:
    <input type="submit" value="Ooo. Veja. Texto em um botão. Wow"/>
  • <input type=”image”/> é uma imagem que vai enviar as coordenadas do ponto em que o usuário clicou. Também exige um atributo src, como a tag img.
  • <input type=”button”/> é um botão que não faz nada sem código extra adicionado. Quando a gente estudar javascript você vai entender qual a utilidade dele.
    Exemplo de input type=Button
  • <input type=”reset”/> é um botão que quando clicado vai limpar os campos do formulários para seus valores default. Nem sempre é uma boa idéia, porque não tem tanta utilidade assim (quantas vezes você já precisou limpar um formulário?) e o usuário pode acabar clicando nele sem querer (e acredite, isso não é legal). Portanto, só coloque esse botão na sua página se você realmente achar necessário.
  • <input type=”hidden”/> é um campo que não aparece na tela e é usado para passar informação como o nome da página em que o usuário está, o endereço de email para o qual o post vai ser enviado ou qualquer outro dado que não seja inserido pelo usuário.

Perceba que a tag input fecha a si mesma com um “/>” no final.

Uma textarea é, basicamente, uma textbox grande. Ela requer os atributos rows (linhas) e cols (colunas) e funciona assim:

<textarea rows="5" cols="20">Um monte de texto aqui.</textarea>

Exemplo de Textarea

A tag select trabalha junto com a tag option pra criar caixas de seleção drop-down.

Elas são usadas assim:

<select>
<option value="primeira opção">Opção 1</option>
<option value="segunda opção">Opção 2</option>
<option value="terceita opção">Opção 3</option>
</select>

Exemplo de Select com três Options

Quando o formulário é enviado (quando você clica no botão submit), o valor da opção (tag option) selecionada é enviado.

Similar ao atributo checked de checkboxes e radio buttons, uma tag option também pode ter um atributo selected (selecionado), usado no formato:

<option value="mouse" selected="selected">Roedor</option>

Todas as tags mencionadas acima vão aparecer “bem bonitinhas” na página, mas se você enviar seu formulário pra um programa que manipule formulários todos esses campos vão ser ignorados. Isso acontece porque campos de formulários precisam de nomes, pra que possam ser identificados pelo programa responsável por eles. Por isso, pra todos os campos do formulário, o atributo name precisa ser adicionado, por exemplo:

<input type="text" name="esponjafalante"/>

Um formulário pode parecer com esse aí embaixo. (Nota: esse formulário não vai funcionar a menos que exista um arquivo “entreemcontato.php”, declarado no atributo action da tag form tag, pra manusear os dados enviados).

<form action="entreemcontato.php" method="post">
<p>Nome:</p>
<p><input type="text" name="nome" value="Seu Nome"/></p>
<p>Comentários:</p>
<p><textarea name="comentários" rows="5" cols="20">
Seus comentários
</textarea></p>
<p>Você é:</p>
<p><input type="radio" name="vocee" value="homem" checked="checked"/>
Homem
</p>
<p><input type="radio" name="vocee" value="mulher"/>
Mulher
</p>
<p><input type="checkbox" name="cefet" checked="checked"/>Estudo no Cefet</p>
<p>O que você achou desse minicurso?</p>
<select>
<option value="bom">Bom</option>
<option value="regular" selected="selected">Regular</option>
<option value="ruim">Ruim</option>
</select>
<p><input type="submit" value="Enviar"/></p>
<p><input type="reset" value="Limpar"/></p>
</form>

Formulários tem um outro nível de complexidade que você vai poder se aprofundar quando a gente chegar no Tutorial Avançado de HTML.

Páginas Relacionadas

Exemplos

Referência

BlogBlogs Tags: , , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Iniciante de HTML: Tabelas

24 02 2008

Exemplo de Tabela

De um lado a outro da web, usava-se a abusava-se das tabelas HTML pra fazer o layout das páginas. Nós veremos como criar um layout sem tabelas, no Tutorial Avançado de CSS. O uso correto das tabelas é fazer exatamente o que você espera que uma tabela faça – estruturar dados tabulares, tais como descrição de dados estatísticos em geral, agendas, calendários, planilhas em geral e etc.

Existem várias tags usadas em tabelas, e entender completamente como elas funcionam é provavelmente a parte mais difícil do Tutorial Iniciante de HTML.

Adicione o código seguinte à tag “body” em seu documento HTML e então nós veremos o que cada tag está fazendo:

<table>
    <tr>
        <td>Linha 1, Célula 1</td>
        <td>Linha 1, Célula 2</td>
        <td>Linha 1, Célula 3</td>
    </tr>
    <tr>
        <td>Linha 2, Célula 1</td>
        <td>Linha 2, Célula 2</td>
        <td>Linha 2, Célula 3</td>
    </tr>
    <tr>
        <td>Linha 3, Célula 1</td>
        <td>Linha 3, Célula 2</td>
        <td>Linha 3, Célula 3</td>
    </tr>
    <tr>
        <td>Linha 4, Célula 1</td>
        <td>Linha 4, Célula 2</td>
        <td>Linha 4, Célula 3</td>
    </tr>
</table>

O elemento table define a tabela.

O elemento tr define uma linha da tabela.

O elemento td define uma célula. Elas precisam estar contidas em tags tr, como foi mostrado acima.

Se você imaginar uma tabela 3×4, que tem 12 células, devem existir quatro elementos tr pra definir as linhas e três elementos td em cada linha, totalizando 12 elementos td.

Páginas Relacionadas

  • Próxima Página: Formulários
  • Página Anterior: Imagens
  • Tabelas (Tutorial Intermediário de HTML) – um pouco mais detalhado, incluindo como unir células.

Exemplos

Referência

BlogBlogs Tags: , , , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Iniciante de HTML: Imagens

24 02 2008

Imagem numa página HTML

As coisas podem parecer um pouco chatas e paradas com toda esta formatação de texto. Mas, é claro, a web não é feita só de texto, ela é multimídia e a forma de mídia mais comum é a imagem.

A tag img é usada pra inserir uma imagem num documento HTML e sua sintaxe é essa:

<img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="Logo do HTML Dog" />

O atributo src diz ao navegador onde encontrar a imagem. Como na tag a, esse atributo pode ser absoluto, como o exemplo acima demonstra, mas geralmente é relativo. Por exemplo, se você criar sua própria imagem e salvar com o nome “minhaimagem.jpg” numa pasta chamada “imagens”, o código seria <img src="imagens/minhaimagem.jpg"...

Os atributos width (largura) e height (altura) são necessários porque se eles forem removidos, o navegador vai tentar calcular o tamanho da imagem enquanto ela carrega, ao invés de depois que a página carrega, o que significa que o layout do documento pode ficar se mexendo enquanto a página está carregando.

O atributo alt é uma descrição alternativa. Ele é usado por pessoas que não podem ou escolheram não ver as imagens (como deficientes visuais). É obrigatório na última versão do HTML.

Perceba que, como a tag br, a tag img não possui uma tag de fechamento, e fecha a si mesma, terminando com “/>”.

Tipos de Imagens

A construção de imagens pra web está um pouco fora do escopo desse minicurso, mas não custa nada explicar algumas coisas…Os formatos de arquivo mais usados para imagens são GIF, JPEG e PNG. Todos eles são formatos comprimidos, cada um feito pra uma situação diferente. GIFs não podem ter mais que 256 cores, mas elas mantém as cores da imagem original. Quanto menos cores você tiver na imagem, menor será o tamanho do arquivo.

Gifs devem ser usadas em imagens simples, com cores sólidas.

Exemplo de imagem gif

JPEGs usam um algoritmo matemático para comprimir a imagem, o que vai distorcer levemente o original. Quanto menor a compressão, maior o tamanho do arquivo, mas maior a qualidade da imagem. Uma imagem JPEG normalmente perde qualidade cada vez que a imagem é salva.

Jpegs devem ser usadas em imagens como fotografias, com muitas cores.

Paisagem

(foto por ecstaticist)

O PNG surgiu pra ser uma alternativa ao GIF melhor que ele – e é. O PNG consegue trabalhar com muitas cores e possui uma compressão eficiente (tanto quanto o JPEG) – e o arquivo não perde qualidade cada vez que é salvo. Além disso, o formato PNG suporta transparência.

Pngs são adequadas pra qualquer tipo de imagem.

Mesmo com todas essas vantagens, o ainda PNG não é tão comum quanto seus rivais, e o motivo disso é o Internet Explorer, que até a versão 6 não suportava corretamente PNGs transparentes, o que atrasou sua adoção.

Imagens provavelmente vão ser os maiores arquivos que um webdesigner principiante vai usar. É um erro comum ignorar o tamanho do arquivo das imagens, que pode ser extremamente grande. Páginas web devem carregar o mais rápido possível, e se você lembrar que muitas pessoas ainda usam modems que fazem download a menos de 7kb por segundo (na verdade menos de 5kb), você vai ver como um arquivo grande pode deixar mais lento o carregamento de uma página. E ninguém gosta de ficar esperando uma página. Você precisa encontrar um equilíbrio entre qualidade e tamanho do arquivo. A maior parte dos programas de manipulação de imagem permite a você comprimir imagens e o melhor jeito de descobrir qual a melhor solução pra você é tentativa e erro.

Páginas Relacionadas

Exemplos

Referência

BlogBlogs Tags: , , ,

Esse material é uma tradução do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Iniciante de HTML: Links

24 02 2008

Link em uma página HTML

Até agora você veio construindo uma página web individual, que é bem legal e divertido, mas o que faz a internet tão especial é que ela está toda interligada – linkada.

O ‘H’ e o ‘T’ em HTML significam ‘hipertexto‘, que é um sistema de texto interligado. Leia mais sobre hipertexto.

Uma tag âncora (a) é usada para definir um link, mas você também precisa adicionar algo mais à tag âncora – o destino do link.

Adicione isso ao seu documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Minha primeira página web</title>
</head>

<body>
<h1>Minha primeira página web</h1>
<h2>O que é isso?</h2>
<p>Uma página simples feita usando HTML</p>
<h2>Por que isso?</h2>
<ul>
<li>Para aprender HTML</li>
<li>Para exibir
<ol>
<li>Pro meu chefe</li>
<li>Para os meus amigos</li>
<li>Pro meu gato</li>
<li>Pro pequeno pato falante na minha cabeça</li>
</ol>
</li>
<li>Porque eu me apaixonei pelo meu computador e quero dar um pouco de amor HTML</li>
</ul>
<h2>Onde encontrar esse tutorial</h2>
<p><a href="https://codando.wordpress.com">Codando</a></p>
</body>

</html>

O destino de um link é definido no atributo href da tag a. O link pode ser absoluto – você indica o endereço completo do destino, como “https://codando.wordpress.com&#8221;, ou pode ser relativo à página atual.

Então se, por exemplo, você tivesse um outro arquivo chamado “gramadoverde.html”, aquela linha de código poderia ser simplesmente <a href="gramadoverde.html">O milagre de um gramado verde</a> ou alguma coisa parecida.

Um link não tem que se linkar a um outro arquivo HTML, ele pode se linkar a qualquer arquivo em qualquer lugar da web.

Links também podem enviar o usuário para outra parte da página em que eles estão. Você pode adicionar um atributo id pra qualquer tag, por exemplo <h2 id=”grama”>Grama</h2>, e então criar um link pra ele usando alguma coisa assim: <a href=”#grama”>Vai para a grama</a>. Clicar nesse link vai levar a página direto pro elemento com aquele id.

Usando o atributo “target”, você pode fazer com que o link abra numa nova página, ao invés de substituir a página em que o usuário está.

Isso pode até parecer uma boa idéia, já que não leva o usuário pra fora de seu site. Porém, existem inúmeros razões pelas quais você não deve fazer isso.

Do ponto de vista da usabilidade, esse método quebra a navegação. A ferramenta de navegação mais usada em um navegador é o botão “voltar“. Abrindo uma nova janela desabilita essa função.

De um ponto de vista mais amplo, usuários não querem que novas janelas fiquem aparecendo em todo lugar. Se eles querem abrir um link em uma nova janela eles podem escolher fazer isso no navegador.

Páginas Relacionadas

Exemplos

  • Âncoras – linkando partes de uma página

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Iniciante de HTML: Parágrafos

22 02 2008

Trecho de código HTML 

Agora que você já conhece a estrutura básica de um documento HTML, você pode mexer um pouco com o conteúdo. Volte pro seu editor de texto e adicione a linha seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Minha primeira página web</title>
  </head>

  <body>
    Essa é minha primeira página web.
    Que excitante.
  </body>
</html>

Olhe para o documento no seu navegador.

Você deve ter esperado que o documento aparecesse como você digitou, em duas linhas, mas ao invés disso você vai ver alguma coisa como:

Essa é minha primeira página web. Que excitante.

Isso acontece porque navegadores web não fazem noção de que linha o seu código está. Ele também não tem noção da quantidade de espaços (você conseguiria o mesmo resultado se digitasse “Essa é minha primeira página web. Que excitante.”).

Se você quer que o texto apareça em muitas linhas, você tem que dizer isso explicitamente.

Edite suas duas linhas de código para que elas fiquem assim:

<p>Essa é minha primeira página web.</p>
<p>Que excitante.</p>

A tag p quer dizer parágrafo.

Olhe o resultado disso. As duas linhas agora aparecem em duas linhas.

Pense no HTML como se fosse um livro – com parágrafos aonde for apropriado.

Ênfase

Você pode enfatizar texto num parágrafo usando em (ênfase) e strong (ênfase forte). São dois jeitos de fazer praticamente a mesma coisa, e geralmente os navegadores mostram em em itálico e strong em negrito.

<p>Sim, foi <em>isso</em> que eu disse. É <strong>tão</strong> excitante.</p>

Quebras de linha

A tag de quebra de linha também pode ser usada para separar linhas como isso:

Essa é minha primeira página web.<br />Que excitante.

No entanto, esse método geralmente é usado em excesso. Ele não deve ser utilizado se dois blocos de texto devem estar separados um do outro (porque se é isso que você quer fazer você provavelmente quer a tag p).

Note que, como não há nenhum conteúdo envolvido pela tag de quebra de linha, não há tag de fechamento. Ela se fecha com uma “/” depois do “br”.

Páginas Relacionadas

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.