11 Dicas que você precisa saber em HTML

26/08/12     dicas Web Design

11 Dicas que você precisa saber em HTML antes de se tornar um web designer

Vou mostrar a vocês algumas tags do html que serão muito uteis no seu dia a dia e que até as vezes você nem se dava conta que existia, mostrarei neste post as tags e explicarei para que serve cada uma dela. Uma coisa que digo, se você quiser inicia uma carreira em web a primeira coisa que você tem que fazer é aprender HTML, muitos dizem que HTML já é ultrapassado, mas não é isso, o HTML é a base de tudo, para todas as paginas em que você for fazer, você irá usar o HTML, então ta ai algumas dicas que separei para vocês. Aproveitem.

1) Colocando uma linha entre os textos no html.

E para começar vou mostrar essa que é bem simples, é a tag que você usa para adicionar uma linha no html, como abaixo.


é muito bom usá-la para fazer tópicos o nome da tag que você usa para fazer isto está abaixo:

2) Como fazer redirecionamentos com html.

Aqui nesta parte vou mostra a fazer redirecionamentos ex: quando alguma página não está disponível você pode deixar que a pagina se redirecione altomaticamente para a pagina que você desejar.

Para fazer isto é bem simples, para que dê certo você tem que colocar o código que eu colocarei abaixo na tag meta (na parte de cima do seu código),

<META HTTP-EQUIV=Refresh CONTENT='1; URL=http://www.bonstutorias.com.br';>

Em CONTENT: é o lugar onde você define o tempo em segundos que o redirecionamento da página vai demorar no meu exemplo está em 1 segundo. O Content pode ser usado para outra finalidade também no meu caso usei para tempo.

Em URL: é o lugar onde você coloca a url da página que você quer que você vá.

3) Colocar uma borda em seu formulário.

Com a tag <fieldset> você pode colocar uma borda ao redor do seu formulário como no exemplo abaixo. é uma boa forma para deixar seus forms com uma cara boa.

Exemplo de linha ao redor do formulário.
Comentário:

 

Código do Exemplo;

 <fieldset>
    <legend> Exemplo de linha ao redor do formulário.</legend>
    <form action="">
  <label>
    Nome:<input type="text" name="nome" id="nome" />
  </label>
  <br /><br />
<label>
    E-mail:<input type="text" name="email" id="email" />
  </label>
  <br />
  <br />
    Comentário:<input type="text" name="Comentário" id="comentário" />
</form>
    </fieldset>

4) Como alinhar fotos ao lado de textos com HTML.

Nesta parte vou mostra como alinhar fotos em posições estratégicas com texto ao lado das mesmas sem precisar de usar tabela, abaixo eu vou colocar os exemplos com os códigos respectivos.

Foto alinhada a esquerda.

Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,

 

Foto alinhada a esquerda.

Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,Texto de teste,

Código

Alinhado a esquerda: <img src=”foto.jpg” width=”80″ height=”80″ align=”left”/>Alinhado a direita: <img src=”foto.jpg” width=”80″ height=”80″ align=”right” />

5) Colocando um link para o topo da página.

Com a tag de link mesmo você pode colocar um link em que vai para o topo da página como neste link clique aqui para ir para o topo. com este link é muito bom para que usuário não fique usando o scroll do mouse, além de enviar o usuário bem rapidamente para o começo da pagina.

Código

Aqui é a tag que colocamos o link:

<a href=”#topo”>aqui para ir para o topo.</a>

Nesta tag é onde colocamos o caminho para onde o usuário deverá ir quando clicado na tag acima, no meu caso eu coloquei o título:

<a name=”topo”>Dicas que você precisa saber em HTML antes de se tornar um web designer</a>

6) Colocando códigos em sua página.

Para que você coloque códigos em sua página sem que o navegador reconheça como um código para a página você deve usar a tag <code> com ela fica muito mais fácil para você colocar códigos em tutoriais, explicações e etc.

Como usá-lo

<code><img src=”foto.jpg” width=”80″ height=”80″ align=”left” /><table><div></div><ul><li><h1><a href></a></code>

7) Deixando o texto em aberto

Use a tag <pre> para deixa o texto em aberto com esta tag você pode deixar quantos espaços quiser no seu texto, que no normal você não conseguiria.

<pre>

Texto com muitos                                    espaços                   espaços.....

.... texto livre .....      quantos espaços quiser.
</pre>


8) Fazendo um texto rotativo

Com a tag <marquee> você pode fazer um texto rotativo em sua página, ele é muito usado quando queremos colocar destaque a alguma coisa, você pode colocar qualquer formatação no texto e também inserir links como no exemplo abaixo;

…Aqui é um texto rotativo link…

Código

<marquee>…Aqui é um texto rotativo…</marquee>

9) Colocando um texto de traz para frente com HTML

Com a tag <bdo> você pode colocar um texto de traz para frente, como no exemplo abaixo.

Aqui é um exemplo de um texto de traz para frente

código

<bdo dir=”rtl”>Aqui é um exemplo de um texto de traz para frente</bdo>

10) Fazendo listas

com a tag <ol> (Ordened List) e <ul> (Unordened List) você pode fazer vários tipos de lista.

Exemplos de lista desordenadas:

  • Photoshop
  • Flash
  • Dreamweaver
  • Fireworks

Exemplos de lista ordenadas:

  1. Photoshop
  2. Flash
  3. Dreamweaver
  4. Fireworks

Código

Desordenada

<ul>

<li>Photoshop</li>

<li>Flash</li>

<li>Dreamweaver</li>

<li>Fireworks</li></ul></div>

Ordenada

<ol>

<li>Photoshop</li>

<li>Flash</li>

<li>Dreamweaver</li>

<li>Fireworks</li></ol>

11) Enviando e-mails com HTML

Com o html é possível enviar e-mails e formulários através do Outlook ou seu programa de envio de mensagens padrão.

Exemplo:

Este é um formulário criado por Bons Tutoriais

Nome:

E-mail:

Comentário:


Código

<input type=”text” name=”name” value=”seu nome” size=”20″></p>

<form action=”MAILTO:victortiago@bonstutoriais.com.br” method=”post” enctype=”text/plain”>

<p> <br>

E-mail:<br>

<input type=”text” name=”mail”

value=”seu email” size=”20″>

</p>

<p><br>

Comentário:<br>

<input type=”text” name=”comment”

value=”seu comentário” size=”40″>

<br><br>

<input type=”submit” value=”Enviar”>

<input type=”reset” value=”Apagar tudo”>

</p>

</form>

com a tag “mailto:” você pode definir para onde a mensagem de email irá, ex: o seu email, você pode colocar esta tag dentro de um link sem precisar de fazer um formulário, ex:clique aqui para enviar um email.

Código:

<a href=”mailto:victortiago@bonstutoriais.com.br”>clique aqui para enviar um email</a>

Pessoal espero que vocês tenham aproveitado estas dicas e que tenham agregado para o seu conhecimento, a todos que estão começando agora eu desejo muita sorte, e não fiquem somente focados em software e programação porque o designer não é feito somente disto.



Novidades do BT por email

Coloque abaixo eu email para receber em primeira mão todas as novas matérias do BT, de tutoriais, cursos e inspirações!

Comente aqui

Publique um comentário abaixo

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

3 comentários

  1. Vlw… ótimas dicas…

  2. Boa Tarde Pessoal,

    Tenho pesquisado e estudado muito sobre HTML

    Eu fiz um curso na Impacta e foi de muito bom proveito e aprendizado.

    Entrei no curso sabendo apenas o básico, agora que acabei estou muito mais preparado para o mercado de trabalho.

    Recomendo a todos.

    Segue link do curso. http://www.impacta.com.br/curso/HTML5-Fundamentos.php

    Abraços!

compartilhe
compartilhar no Facebook compartilhar no Twitter compartilhar no Linkedin compartilhar no Pintrest compartilhar no WhatzApp compartilhar no Skype compartilhar no pocket
Sobre o BT

Tudo começou com uma simples ajuda, um colega de trabalho estava tentando criar o seu álbum de fotos digital com uma música de fundo para poder dar de presente em seu casamento, até ai não tem nada ver com Bons Tutoriais, mas vamos chegar lá... Veja mais.

Patrocínio
Desenvolvimento de identidades visuais e estratégias de marketing digital
Recomendamos
AE Dicas Comunique 9 Minuto Design Mkt News Pixel Coffee Publicinove Revelando Ideias Sala7Design Tutorial Web Design

© Bons Tutoriais | Desde 2008 - Direitos reservados. ❤ Design | Ps+Ai+In | PHP+HTML+CSS | WordPress