Destaques da Semana

11 Dicas que você precisa saber em HTML

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...

Patrocínio

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.

Patrocínio

Por victortiago - dezembro 13th, 2009
imagem de buugre

muito bom, parabens

imagem de Anônimo
muito bão... mas como fazer para o texto do formulario sair no momento em que eu clicar para preencher o campo... é claro, sem que eu precise apagar manualmente, tipo o msn... o w11 2010 pegou??
imagem de Anônimo
mandou super bem..muito boa dica vlww por compartilhar
imagem de Anônimo
mandou super bem..muito boa dica vlww por compartilhar
imagem de Anônimo
mmuuiito legalll..!!!! adoreiii!!! parabénsss

Comentar

  • Endereços de páginas de internet e emails viram links automaticamente.
  • Tags HTML permitidas: <a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike> <caption>

Mais informações sobre as opções de formatação

Anúncios Patrocinados

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina
Portal da Festa

Atualizações dos Usuários

Efeito Freddie mercuryprateado

Acompanhar

Participe da nossa comunidade no Orkut! Siga-me no Twitter e fique por dentro das novidades Facebook Feed Posts

Wallpapers

Amigos

Quem sou

Em primeiro lugar muito obrigado por visitar o meu site, meu nome é Victor Tiago sou Designer Web/gráfico, localizado em São Paulo adoro mecher com design e programação e fiz este blog com o intuito de compartilhar com vocês minha experiência nesta área através de tutoriais. Sejam Bem vindos!

Caso queira entrar em contato comigo envie um e-mail para victortiago@yahoo.com ou acessem meu twitter @victortiago

Sugestões ?

Bons Tutoriais é um site de tutoriais/ vídeo aulas de vários programas variados não só tutoriais mas também dicas e inspirações, o site é focado para a área de marketing, publicidade e design.

Bons Tutoriais é um site dinâmico em que os usuários podem divulgar seus trabalhos ou tutoriais e também pedir sugestões de tutoriais enviando os links pelo formulário de contato, o conteúdo deste blog é protegido sob a licença Creative Commons.

Você pode usar o conteúdo dos tutoriais para trabalhos e demonstrações, em caso cópia do post para outros sites colocar a fonte.

Seja nosso parceiro

Adicione nosso banner em sua pagina e faça parte do nosso quadro de amigos!

Copie o código do banner desejado abaixo.

Res: 180x40

Bons Tutoriais - Vídeo-aulas e Tutoriais

Código

Res: 120x60

Bons Tutoriais - Vídeo-aulas e Tutoriais

Código

Bons Tutoriais 2009 Todos os direitos reservados. Hospedado por Homehost. Site desenvolvido em Drupal Tema desenvolvido por Victor Tiago.