HTML, CSS, JavaScript e jQuery: O básico de programação Web - Parte 1

Olá,

Hoje vou falar um pouco sobre programação Web.

Requerimentos:
Você precisará de um editor HTML com pré-visualização.
Um editor HTML online com suporte a HTML, CSS e JavaScript está disponível no seguinte link: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Aviso: Por padrão, este editor aplica um CSS fix, vamos deixar este fix ativo pois ele é muito utilizado.

HTML 4.01
no HTML 4.01 (o HTML que conhecemos), temos várias tags, desde as mais usadas (div, img, p), até aquelas que não sabemos em que usar, e muito menos de onde elas vieram (pre, dfn, var).
Hoje vamos aprender algumas dessas tags e o que elas fazem, e também aprenderemos seus atributos.

A tag img
Provavelmente você já ouviu falar nessa tag, ela é a tag usada para inserir imagens nas páginas!
Utilização da tag img:

Código:

<img src="LINK" alt="IMAGEM NÃO CARREGOU">

Explicação:

<img src="LINK" alt="IMAGEM NÃO CARREGOU">

Vermelho: De vermelho temos o texto "img", que é o nome da tag. img significa image, que em português significa imagem.
Verde: De verde temos o texto "src="LINK"", aqui temos 2 partes: um atributo (src), e o valor do atributo (link). src significa source, que em português significa fonte. Este atributo é muito importante, ele diz onde que está a imagem que o navegador deve carregar. O valor link é onde fica o endereço da imagem.
Azul: De azul temos o texto "alt="IMAGEM NÃO CARREGOU"", aqui temos 2 partes novamente: um atributo e um valor. O atributo significa alternate text, que em português fica "texto alternado". O valor deste atributo é o texto que aparece quando a imagem não carrega.

Tente você mesmo:
Abra o editor de HTML [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] e, no campo HTML (o primeiro campo de texto contando de cima para baixo e da esquerda para a direita), digite:

Código:

<img src="http://i.imgur.com/5ZtT5.jpg" alt="Logo do fórum">

Após isso, clique no botão Run, ele deve atualizar a pré-visualização, o resultado deve ser o logo deste fórum.

A tag p
A tag p é uma das tags principais do HTML, ela insere um parágrafo na página.
Se você pensa que a tag p só é usada para poesias online, você está enganado.
Utilização da tag p:

Código:

<p>TEXTO</p>

Explicação:

<p>TEXTO</p>

Vermelho: A tag - p vem de paragraph, que em português significa parágrafo.
Roxo: O fechamento da tag - Esta tag tem algo novo: o fechamento da tag. O fechamento permite que você adicione outras tags dentro. É importante que você feche todas as tags corretamente
Azul: O conteúdo da tag. Este valor pode ser texto, um mix de texto com outras tags html, ou outras tags html.

Tente você mesmo:
Neste tente você mesmo teremos 3 exemplos:
- Exemplo 1: Apenas texto
- Exemplo 2: Texto e outras tags
- Exemplo 3: Outras tags
Clique em um exemplo e você será levado para a página do exemplo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

A tag div
A tag div é uma das minhas tags favoritas, ela é usada para inserir uma caixa com largura=100% na página (uma divisão na página), mas pode ser modificada para ocupar um espaço único numa página.
Utilização:

Código:

<div>CONTEÚDO</div>

Essa tag é parecida com a tag p, a única diferença é que a tag p tem um espaçamento especial que a tag div não tem.
Exemplos:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Por hoje é só!
Nos vemos na parte 2!

Até mais!

Muito bom!
Obrigado por compartilhar conosco.
Espero que continue contribuindo com o fórum.
Esperamos a segunda parte.

Até.

Não temos muitos membros que entendem de programação.
Obrigado por vir e contribuir com essa área, para que ela possa crescer.

Abraços.