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

Ola,

Hoje vou falar mais 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]

O que significa HTML, CSS, JavaScript e jQuery?
HTML significa HyperText Markup Language.
CSS significa Cascading Style Sheet.
JavaScript significa JavaScript.
jQuery significa JavaScript Query.

Como usar o JSFiddle (Principais opções)
no JSFiddle, temos algumas opções para usá-lo, hoje aprenderemos um pouco sobre cada uma delas.
Botões na parte de cima da página:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Como podem ver, aqui temos os botões "Run", "Save", "Reset", "TidyUp", "JSLint".
O botão "Run":
O botão Run é o botão "pré-visualizar", ele "roda" o código.
Não há muito o que explicar, apenas digite alguma coisa na área "HTML" e clique nele, você verá o texto digitado na pré-visualização.
O botão "Save":
Este botão é usado para salvar o código em um endereço, mas ele não será usado nos tutoriais.
O botão "Reset":
Este botão apaga todos os códigos inseridos na página.
O botão "TidyUp":
Este botão formata os códigos JavaScript. Aprenderemos mais sobre ele depois.
O botão "JSLint":
Este botão proucura por erros nos códigos JavaScript. Aprenderemos mais sobre ele depois.

Também temos o menu lateral.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Vermelho: De vermelho temos a lista de opções "Choose Framework", nela podemos escolher a framework que queremos usar. Para esta parte do tutorial iremos modificar as opções no quadrado marrom:
Troque "onLoad" por "no wrap (head)".
Troque também "Mootools 1.4.2" por "jQuery 1.3.2".
Abaixo da opção "jQuery 1.3.2" (após selecionar), aparecerá a opção "jQuery UI 1.7.2". Marque-a.
Desmarque a caixa de seleção "Normalized CSS", assim iremos desativar o CSS fix.
Laranja: Esta lista de opções define os painéis que irão aparecer. Não iremos usar estas opções.
Verde: Esta lista de opções é usada para adicionar arquivos CSS e JS. Não iremos usar estas opções.
Azul: Esta lista de opções permite a você editar as informações do documento. Abra-a pois iremos modificar algumas coisinhas aqui.
Após abris esta lista, aparecerá as opções "Title", "Description", "Body Tag", e "DTD".
Troque o DTD por "HTML 4.01 Strict".
Vinho: Estas listas de opções são informações sobre o editor, não serão usadas em nenhuma parte do tutorial.

CSS 2
Hoje iremos aprender um pouco de CSS, e continuar com nossa aula de HTML.
CSS Fix
O CSS fix é basicamente 2 propriedades CSS:

Código:

padding: 0;
margin: 0;

Existem outros tipos de CSS fix, mas este é o mais usado. (como por exemplo, por padrão este fórum utiliza este CSS fix.)

Veja as tags que aprendemos anteriormente sem CSS fix:
Tag p
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Tag div
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Aplicando um fundo nas divs
Vamos aprender como aplicar um fundo a divs.

Código:

div {
background: none;
}

Este é o formato dos códigos CSS.
Ele é definido da seguinte maneira:

tag {
propriedade: valor;
}

Vermelho: Aqui fica a tag que vai receber a formatação.
Verde: Aqui é o nome da propriedade, agora aprenderemos a propriedade "background".
Azul: Aqui é o valor da propriedade.

No código de aplicar fundo a divs não estamos aplicando um fundo.
Naquele código, troque "none" por "#FF0000".
O fundo de todas as divs deverá ficar vermelho.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Colocando uma imagem como fundo
Agora iremos colocar uma imagem como fundo.
O código usado é:

Código:

div {
background: url(http://i.imgur.com/5ZtT5.jpg);
color: #FFFFFF;
}

Note que eu usei a propriedade color com o valor #FFFFFF.
Eu usei a propriedade color para definir a cor do texto para branco (#FFFFFF).
Note que o fundo ficou o logo deste fórum.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Tag br
Vamos descobrir como usar a tag br.
A tag br:

Código:

<br />

Essa tag insere uma line break (Quebra de linha). O nome br vem de break.
Não há muito o que dizer sobre essa tag... ela foi usada nos exemplos acima...

HTML, CSS e JavaScript
Agora vamos juntar HTML, CSS e JavaScript, para tentar fazer uma página legal.

O código HTML:

Código:

<div id="img"></div><div id="imginfo">Clique na imagem acima.</div>

O código CSS:

Código:

div {
background: #EEEEEE;
}
#img, #imginfo {
text-align: center;
}
#imginfo {
color: #000000;
}

O código JavaScript/jQuery:

Código:

$(document).ready(function(){
$("#img").html('<img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png" width="50" height="50" alt="imagem do fórum" id="get">');
$("img").click(function(){
$("#imginfo").html("Largura da imagem: " + $("img").width() + "<br />Altura da imagem: " + $("img").height());
});
});

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Note algumas coisas:
No CSS, usamos "#img" e "#imginfo" como tags.
O simbolo #, é um indicador do atributo "id".
Exemplo:

Código:

#img = <div id="img"></div>

Agora vamos ao javascript/jQuery:
Nosso código começa com a seguinte linha:

Código:

$(document).ready(function(){

Essa linha faz o seguinte:
Se o documento (que é document) estiver com o HTML pronto para ser modificado (.ready), rodar os comandos.
No fim do código, temos a seguinte linha:

Código:

});

Essa linha fecha a primeira linha.
Note que todo código jQuery começa com "$".
Também temos a seguinte linha:

Código:

$("#img").html('<img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png" width="50" height="50" alt="imagem do fórum" id="get">');

Essa linha define o html de <div id="img"> para <img src="https://2img.net/i/fa/i/smiles/icon_biggrin.png" width="50" height="50" alt="imagem do fórum" id="get">.
Note que adicionamos uma outra função dentro do código:

Código:

$("img").click(function(){
$("#imginfo").html("Largura da imagem: " + $("img").width() + "<br />Altura da imagem: " + $("img").height());
});

Essa função é disparada quando você clica em uma imagem.
Note a seguinte linha dentro da função:

Código:

$("#imginfo").html("Largura da imagem: " + $("img").width() + "<br />Altura da imagem: " + $("img").height());

Essa linha define o html de <div id="imginfo"> para:
1. Coloca "Largura da imagem: " no HTML.
2. Obtém a largura da imagem img e adiciona ao HTML.
3. Coloca "<br />Altura da imagem: " no HTML.
4. Obtém a altura da imagem img e adiciona ao HTML.

Na próxima parte aprenderemos mais sobre HTML, CSS, JavaScript e jQuery. Tudo isso misturado. (fica mais legal misturar tudo do que fazer parte por parte...)

Isso é tudo.
Nos vemos na próxima parte!
Até mais!

Excelente tópico.
Fico feliz que esteja contribuindo com a área de programação.
Espero que continue assim.

A parte 1 estava ótima, obrigado por postar o complemento.
Ficou tão bom quanto a parte 1. Continue nos ajudando!

Abraços.

Terminei o tópico.

A parte onde eu misturei tudo sem falar nada de jQuery foi só uma introdução ao jQuery.

Até mais!