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




Anuncie aqui

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.

Receba atualizações grátis do bt no seu E-mail

Temos total respeito com você, nunca enviaremos spam, ok? Apenas nossas novas matérias, basta colocar seu email abaixo e depois realizar sua confirmação via email, simples assim :-D

Victor Brito

Diretor de criação amante da área de Branding, fundador do blog Bons Tutoriais onde compartilha suas experiências com artigos sobre Design Gráfico, Web Design e outras coisas mais. Você pode encontrá-lo postando no Publicinove ou em sua agência - Criativito Comunicação.

864 posts publicados
veja todos aqui.

Comente aqui

  • João

    Legal

  • Mauricio Joaquim

    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!

  • Vlw… ótimas dicas…

© Bons Tutoriais | 2008 - 2016 todos os direitos reservados. Design e Desenvolvimento Criativito Comunicação | Plataformas: WordPress & Bootstrap