[HTML] – Códigos básicos

06/11/2008

Publicado em:

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 .

Texto – Texto fica em Negrito.

Texto – Texto Sublinhado.

Texto – 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

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

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

Reply
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

Reply
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

Reply
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

Reply
Guilherme
11/11/2008 at 07:26
Muito bom cara, ficou muito interessante!

Reply
Oi
19/11/2008 at 23:30
olá

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

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

Reply
kjhkj
02/02/2009 at 13:20
khkh

Reply
Anonymous
13/02/2009 at 13:15
:twisted:

Reply
Marcos
05/03/2009 at 11:40
Show! :razz:

Reply
Anonymous
21/03/2009 at 14:40
:shock: :mrgreen: :shock: :shock: :shock: :shock: :shock:

Reply
Madson
24/05/2009 at 22:19
:mrgreen: Legal mesmo .. Parabéns !!!

Reply
Madson
24/05/2009 at 22:21
nohwcniodcnkln dknk sdl

Reply
Madson
24/05/2009 at 22:23
:roll: Estou testando aqui !!!

Reply
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

Reply
Philipe Monteiro
24/05/2009 at 22:32
Sem problemas Madson, Espero que o tutorial tenha ajudado. Abraços

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

Reply