Monday, May. 21, 2012

[HTML] – Códigos básicos

Escrito por:

|

06/11/2008

|

Publicado em:

html [HTML]   Códigos básicos Olá rapaziada, HTML é a base de tudo não é mesmo?

Toda linguagem de programação para web, seja ela PHP, ASP, ou aquele site mais simples feito com Java Script, todos eles usam como base o HTML (HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto).

E foi pensando nisso que decidi reunir para vocês uma lista com alguns códigos bem simples porém muito utilizados e indispensáveis na hora da criação de um site, mesmo para aqueles que usam CMS (Content Management System – Sistema de gerenciamento de conteúdo) que é o caso de sites feitos em Joomla, WordPress e muitos outros, é necessário ter um conhecimento básico desta estrutura, por isso segue a lista de alguns comandos na para utilizar na hora da criação de seu site, com o tempo irei colocar cada vez mais comandos neste mesmo post portanto não deixe de acompanha-lo.

*(Todos meus comentários estarão entre parenteses.)

  • Estrutura do documento.
  • <HTML>
    <HEAD>
    <TITLE> Titulo do site (o que aparecerá na barra do navegador) </TITLE>
    </HEAD>
    <BODY>
    Aqui vão todos os códigos HTML e é onde fica todo corpo do seu site.
    </BODY>
    </HTML>

    (Lembrando que dentro das tags <HEAD> e </HEAD> podemos colocar informações para os sites de busca como KeyWords e outras informações como o nome do dono do site.

  • Como inserir uma Imagem
  • <img src=”AQUI FICA O ENDEREÇO DA IMAGEM”> (Neste caso colocamos na atributo src o link onde se encontra a imagem, por exemplo : http://www.zoomdigital.org/imagens/banner120x60.png (Este é o link de onde está localizado nosso logo))

  • Como inserir um link
  • <a href=”ENDEREÇO DO SITE QUE DESEJA REDIRECIONAR”></a> (Neste caso podemos colocar o texto que será exibido no link antes do fechamento da tag </a> poderiamos também inserir uma imagem através do “img src” caso desejássemos que o link seja uma imagem qualquer )

  • Como colocar texto em negrito, sublinhado e itálico .
  • <B> Texto </B> – Texto fica em Negrito.

    <U> Texto </U> – Texto Sublinhado.

    <I> Texto </I> – Texto em Itálico.

  • Como posicionar o texto
  • (Neste caso iremos utilizar as tags, center, left e right) como no exemplo a seguir:

    <CENTER> Texto </CENTER> (Para ficar centralizado)

    <LEFT> Texto </LEFT> (Para ajustar a esquerda)

    <RIGHT> Texto </RIGHT> (Para ajustar a direita)

  • Alterando plano de fundo
  • (Para alterar a cor do nosso fundo iremos utilizar o seguinte código dentro da tag body como no exemplo a seguir:)

    <BODY BGCOLOR=”Nome da cor em ingles ou código dela em linguagem de máquina”>

  • Colocar comentários no meu código
  • <!– –>

    <!– Para colocar comentários em meu código HTML, ele deverá estar dentro dos seguintes senparadores (<!– O comentário vai aqui  –>)sendo assim ele não será exibido na sua página HTML apenas no código –>

    Bom rapaziada por enquanto é isto, futuramente irei encorpar mais a nossa lista de códigos, portanto continuem sempre acompanhando este post porque muitas novidades irão aparecer.

    Att

    Compartilhe este artigo

    Notícias Relacionadas

    Carro da Google sem motorista pelas ruas
    Garagem Original onde Apple foi criada, será cena de filme sobre Steve Jobs
    Microsoft Oferece treinamento gratuito

    O Autor

    Philipe Cardoso

    21 anos, Carioca, Criador do Portal Zoom Digital, mantém desde a época que possuia formato de blog, Podcaster oficial do Zoom Cast. Amante por todo tipo de tecnologia e formado como técnico de informática.

    (18) Readers Comments

    1. InFog
      07/11/2008 at 07:41

      Oi Phillipe, acho a idéia de ensinar o básico de html muito legal. Mas não se pode continuar passando adiante essas formas de marcação, o html tem que ser usado apenas para a marcação e não para a formatação dos textos, para isso existe o css. Por exemplo alinhamento, o correto é usar a propriedade text-align do css e não as tags center, right e left. Não é por mal, mas eu acredito é melhor que as pessoas já aprendam usando os padrões w3c e não as coisas surgidas na guerra dos browsers (vide a tag blink). Mais uma vez parabéns pelo texto, mas fica aí a minha dica para melhorarmos a qualidade dos desenvolvedores web. Grande abraço InFog

    2. Philipe Cardoso
      07/11/2008 at 09:49

      Olá InFog. Muito obrigado pelo seu comentário. Realmente os padrões mudaram, mas como todo bom inicio ao html é legal mostrar estes comandos para que o pessoal tenha uma ideia melhor na introdução do próprio HTML.. Ou seja apenas mostrei os códigos, também concordo que quando voce diz que agente pode acabar se confundindo por misturar 2 estruturas depois realmente pode ficar mais dificil fazer uma introdução ao CSS e tudo mais.. A dica é muito válida e realmente vale a pena frizar... Hoje em dia a tendencia é separar a estrutura do design como o HTML e a parte do design deixando por conta do css.. Vlw A dica Infog.. Lembrando que nosso colunista Juan posta otimos artigos sobre CSS neste link: http://www.zoomdigital.org/categorias/curso-css/ Att

    3. Felix
      07/11/2008 at 12:19

      Olá Philipe. Realmente o HTML é a base de tudo! Porém em meus códigos por exemplo, eu prefiro usar as marcações "strong" em substituição ao "b" para negrito e "em" ao invés de "i" para itálico. Assim tenho certeza de seguir os padrões e etc, etc, etc... já o velho sublinhado é um ítem que podemos retirar de páginas HTML para não confundir usuários. Isso claro é só um palpite. Abraços Alexsandro Felix

    4. Philipe Cardoso
      07/11/2008 at 12:23

      Olá Felix.. É verdade.. realmente inclusive os novos CMS já estão utilizando estas marcações em seus editores, o próprio wordpress é exemplo disto, com o tempo irei lançar atualizações neste post (Deve ficar bem grande rs) E também colocarei estas dicas com os novos padrões. Obrigado Att

    5. Guilherme
      11/11/2008 at 07:26

      Muito bom cara, ficou muito interessante!

    6. Oi
      19/11/2008 at 23:30

      olá

    7. DEIVSON
      30/12/2008 at 19:57

      OLÁ CARO COLEGA, GOSTARIA DE INSERIR NO MEU SITE UM FORMULARIO DE COMENTÁRIO DESSE COMO O SEU, VC PODE ME AJUDAR!!!

    8. Philipe Cardoso
      30/12/2008 at 20:03

      Olá Deivson, este sistema de comentário é feito por causa do sistema onde está o Zoom Digital no caso é o Wordpress, voce pode criar este sistema programando, no caso o site scriptbrasil.com.br disponibiliza diversos scripts prontos creio que o de comentário esteja lá também, basta escolhar a plataforma, php,asp .. Espero que tenha lhe ajudado Até

    9. kjhkj
      02/02/2009 at 13:20

      khkh

    10. Anonymous
      13/02/2009 at 13:15

      :twisted:

    11. Marcos
      05/03/2009 at 11:40

      Show! :razz:

    12. Anonymous
      21/03/2009 at 14:40

      :shock: :mrgreen: :shock: :shock: :shock: :shock: :shock:

    13. Madson
      24/05/2009 at 22:19

      :mrgreen: Legal mesmo .. Parabéns !!!

    14. Madson
      24/05/2009 at 22:21

      nohwcniodcnkln dknk sdl

    15. Madson
      24/05/2009 at 22:23

      :roll: Estou testando aqui !!!

    16. Madson
      24/05/2009 at 22:26

      Peço desculpas amigo.... copiei e estava testando como colocar um comentário no site.... Mais só considere os de nome Madson ok.. Brigaduuuuuuuuu

    17. Philipe Monteiro
      24/05/2009 at 22:32

      Sem problemas Madson, Espero que o tutorial tenha ajudado. Abraços

    18. Valter
      15/07/2010 at 01:05

      É possível colocar zoom em imagens no formato HTML? Se for possível peço se possível que me envie o código, ok?! Um abraço!!!

    Deixe seu comentário!

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>