Bons Tutoriais
Destaques do site
Aprenda a criar uma bola de fogo no Photoshop Os melhores video feitos com stop-motion Entrevista com Cristiano Siqueira (CrisVector)

 

 

11 Dicas que você precisa saber em HTML

Tags:

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
Related Posts Plugin for WordPress, Blogger...
imagem de Visitante

Adorei seus tutoriais e vc nem sabe como me ajudou, principalmente no momento em que estou fazendo um trabalho de faculdade criando um site em html

e devido a dificuldade e fazendo busca encontrei você....rsrsrs.

Um Grande abração

 

Related Posts Plugin for WordPress, Blogger...
imagem de victortiago

Fico muito feliz que tenha gostado, 

 

volte sempre 

Related Posts Plugin for WordPress, Blogger...
imagem de buugre

muito bom, parabens

Related Posts Plugin for WordPress, Blogger...
imagem de Visitante
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??
Related Posts Plugin for WordPress, Blogger...
imagem de Visitante
mandou super bem..muito boa dica vlww por compartilhar
Related Posts Plugin for WordPress, Blogger...
imagem de Visitante
mandou super bem..muito boa dica vlww por compartilhar
Related Posts Plugin for WordPress, Blogger...
imagem de Visitante
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

Hospedagem de R$:14,90 por mês e com 500 GB de espaço! confira!
 

Curta

 
 

Acompanhar

Participe da nossa comunidade no Orkut! Siga-me no Twitter e fique por dentro das novidades Facebook Feed Posts
Agregadores
 
Está no seu momento de descanso né? Entao clique aqui! LinkLog :: O melhor da internet UEBA - Melhores links
 

Patrocinio

 
 
 

Mais vistos do mês que passou...

Incríveis fotos de tatuagens 3D

Imagens de Tatoo 3D

Vejam só o realismo destas tatuagens 3D e como os tatuadores são habilidosos, ótimas tatuagens.

veja mais

Aprenda a colocar tatuagens no corpo com o Photoshop

inserindo Tatoo no Photoshop

Aprenda neste tutorial de Photoshop como colocar tatuagens no corpo de uma pessoa com o Photoshop.

veja mais

Tatuagens de Dragões, 21 imagens

Ótimas imagens de tatuagens de Dragões

Veja neste post de inspiração algumas fotos de Tatuagens de Dragões, belos desenhos e realismo ao máximo.

veja mais

Temas para Wordpress grátis para seu blog

Seleção de temas grátis para Wordpress

Seleção de temas totalmente grátis de Wordpress selecionado a dedo para todos os gostos.

veja mais

 

Criando uma cartão de visitas no Photoshop

Aprenda a criar um cartão de visitas com o Photoshop

Aprenda neste tutorial de Photoshop completo de como criar uma cartão de visitas de modo fácil e rápido.

veja mais

Efeito de neve no Flash

Como colocar neve caindo nos seus swf

Veja neste post os 10 melhores sites para você baixar temas para o seu Blog do Blogspot, são inúmeros temas grátis para baixar.

veja mais

20 tutoriais de Photoshop para estilos de Texto

20 melhores efeitos de texto.

Separei 20 dos melhores tutoriais de Photoshop que encontrei na web de efeitos de texto, espero que gostem.

veja mais

Tutorial de Photoshop Criando um efeito de neon

20 melhores efeitos de texto.

Separei 20 dos melhores tutoriais de Photoshop que encontrei na web de efeitos de texto, espero que gostem.

veja mais

 

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 2011 Todos os direitos reservados. Hospedado por Homehost. Site desenvolvido em Drupal Tema desenvolvido por Victor Tiago.