Site de tecnologia com seu podcast , Reviews de Smartphones, Notícias, Cobertura de Eventos, Tutoriais e Vídeo aulas.

[HTML] – Códigos básicos

Posted by in HTML, Tecnologia | 18 comments

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

    pixel [HTML] Códigos básicos
    • http://infog.casoft.info/ InFog

      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

    • http://www.zoomdigital.org Philipe Cardoso

      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

    • http://ffelix.wordpress.com/ Felix

      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

    • http://www.zoomdigital.org Philipe Cardoso


      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

    • Guilherme

      Muito bom cara, ficou muito interessante!

    • Oi

      olá

    • http://HLERA.NET DEIVSON

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

    • http://www.zoomdigital.org Philipe Cardoso

      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é

    • http://hkkjh kjhkj

      khkh

    • Anônimo

      :twisted:

    • Marcos

      Show! :razz:

    • Anônimo

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

    • Madson

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

    • Madson

      nohwcniodcnkln dknk sdl

    • Madson

      :roll: Estou testando aqui !!!

    • Madson

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

    • http://www.zoomdigital.org Philipe Monteiro

      Sem problemas Madson,

      Espero que o tutorial tenha ajudado.

      Abraços

    • Valter

      É 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!!!