[HTML] – Códigos básicos | Zoom Digital : Reviews de Smartphones, Tutoriais, Notícias

[HTML] – Códigos básicos

Por Philipe Cardoso
Categoria: HTML
nov 6th, 2008
19 Comments
6270 Views

htmlOlá 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.com.br/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

    About "" Has 2042 Posts

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

    19 Responses to “[HTML] – Códigos básicos”

    1. InFog disse:

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

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

      Muito bom cara, ficou muito interessante!

    6. DEIVSON disse:

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

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

    8. Anônimo disse:

      😈

    9. Marcos disse:

      Show! 😛

    10. Anônimo disse:

      😯 :mrgreen: 😯 😯 😯 😯 😯

    11. Madson disse:

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

    12. Madson disse:

      nohwcniodcnkln dknk sdl

    13. Madson disse:

      :roll: Estou testando aqui !!!

    14. Madson disse:

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

    15. Sem problemas Madson,

      Espero que o tutorial tenha ajudado.

      Abraços

    16. Valter disse:

      É 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 uma resposta

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