Flaming Phoenix DHTML High School

por Caio. Ter 12 Jun 2012 - 17:49

Bem, essa escola tem como objetivo ensinar os seus alunos a criar sites com HTML, explorando todo o potencial dessa linguagem de marcação. Por esse fato, ensinarei tanto coisas novas e modernas quanto velharias de 90-2000, pois acho importante que aprendam tudo e de forma clara. No futuro, ensinarei também CSS (caso dê certo) e JavaScript (básico, apenas para dar um efeito legalzinho no site). NÃO ENSINAREI coisas como Login, Registro, etc. Isso é mais avançado, usando PHP, ASP, JSP, etc, coisas que não serão abordadas. Ao fim, você certamente estará pronto para tentar essas outras tecnologias. Um exemplo de site que ensinarei vocês a fazarem é o meu site pessoal, que por razões óbvias não postarei aqui.

Tudo o que você precisará para esse curso será dedicação, pois não é necessário nenhum conhecimento prévio ou programas que seu computador não tenha. Usaremos apenas o Bloco de Notas (notepad) do Windows e um Navegador à sua escolha (Internet Explorer, Mozilla, Opera, Chrome, etc). Será bem interessante pela parte de vocês que tenham no mínimo 2 ou 3 navegadores, para ver as diferenças que eles provocam em nossos sites. É sempre bom ter a tríplice Internet Explorer - Firefox/Opera - Chrome, pois cada um deixa de um jeito. No mais, dois você já teve ter (pelo fato do IE ser instalado automaticamente no Windows). Se não quiser, pode também não baixar o terceiro, é apenas para fins experimentais.

Segue então a lista dos 5 alunos aqui matriculados:

1. TsuruGah
2. romuloo
3. l3lue Thunder
4. Hitmonkip
5. Löwen
6. LeoB
7. Charginho
8. ~Leo

Reservas:

Reservas:

9.~Tiger
10.pietrosaggioro
11.Blue flygon
12. ~theMS

Bem, é isso. Quero dizer que todas as lições e questões serão postadas aqui, mas quero os exercícios por MP. Suas avaliações serão feitas por aqui também. Qualquer dúvida, terei o prazer de tirá-las também por aqui, ou por MP, se preferir. Você também tem total liberdade de procurar no Google ou em Apostilas, até mesmo livros. O importante aqui é você aprender, não é mesmo? Então, vamos lá! Ainda hoje teremos uma lição!

SE AS INCRIÇÕES ACABAREM E OS RESERVAS TAMBÉM, FAVOR NÃO INSISTIR E NEM FLOODAR POR AQUI. OBRIGADO.

por MEMEMASTER420 Ter 12 Jun 2012 - 17:50

1. TsuruGah
2. romuloo
3. l3lue Thunder
4. Hitmonkip
5. Löwen
6. LeoB
7.
8.

É, eu já sei HTML, mas vou relembrar porque né

por Charge Ter 12 Jun 2012 - 17:51

1. TsuruGah
2. romuloo
3. l3lue Thunder
4. Hitmonkip
5. Löwen
6. LeoB
7. Charginho
8.

por Leo Ter 12 Jun 2012 - 17:51

1. TsuruGah
2. romuloo
3. l3lue Thunder
4. Hitmonkip
5. Löwen
6. LeoB
7. Charginho
8. ~Leo

por ~Tiger Ter 12 Jun 2012 - 17:51

1. TsuruGah
2. romuloo
3. l3lue Thunder
4. Hitmonkip
5. Löwen
6. LeoB
7. Charginho
8. Tiger

Manjo um pouquinho, mas bora melhorar

por pietrosaggioro Ter 12 Jun 2012 - 17:52

Reservas:

9.Tiger
10.Pietro
11.
12.

por Caio. Ter 12 Jun 2012 - 17:52

Vagas encerradas, agora só Reservas...

PS: Pietro e Tiger, vocês não conseguiram as vagas. Estão nas reservas.

por Jp. Ter 12 Jun 2012 - 17:53

Reservas:

9.~Tiger
10.pietrosaggioro
11.Blue flygon
12

por ms. Ter 12 Jun 2012 - 18:09

9.~Tiger
10.pietrosaggioro
11.Blue flygon
12. MS LINDU

por Caio. Ter 12 Jun 2012 - 18:14

Então, vamos lá... Primeira lição:

Sites são, num geral, algo bem fácil de se fazer. Não é exigido conhecimento prévio nenhum, além de quase nenhuma ferramenta: só um editor de textos, como o Bloco de Notas (Windows) e um navegador, que pode ser, por exemplo, Internet Explorer 9 ou Mozilla Firefox 12, Safari, Opera, Google Chrome, ou qualquer outro de preferência.

É através da linguagem de marcação HTML que criamos nossos sites. Linguagens de marcação servem, como o nome diz, para “marcar documentos”. Uma linguagem de programação, por exemplo, o Java, serve para criar programas. Acabando com nosso pleonasmo, vamos voltar a boa e velha HTML.

Sua marcação é feita através de tags, que são delimitadas pelos sinais de menor que e maior que. A maioria das tags precisam de um fechamento, como as tags de parágrafo, de negrito, itálico, etc. Eis os exemplos:

Código:: Esse é um parágrafo e esta parte ficará em negrito e esta em itálico

Repare que as tags são fechadas repetindo elas normalmente, mas colocando uma / (barra) logo após o sinal de menor que. Repare também que é errado você abrir uma tag , uma e fechar a tag antes de fechar a . Todas elas seguem uma hierarquia. No momento, você não precisa se preocupar com lembrar das tags - isso será abordado mais para frente. Você apenas precisa entender o conceito das mesmas.

Deve estar se perguntando o porquê de eu ter falado que a maioria das tags pedem fechamento. Por quê? A resposta é bem simples! Porque existem algumas tags, como a de pular uma linha (a famosa tecla enter), que não têm conteúdo, logo, elas são fechadas dentro da própria tag de abertura, como por exemplo:

Código::  <img /> <meta />

Por falar na famosa tecla enter, há algo que precisamos comentar: em HTML, qualquer coisa que você digitar, inclusive os enter, serão ignorados no resultado final. Por isso, não adianta aumentar o diminuir a fonte do texto, ela sempre será mostrada do mesmo jeito em HTML, a não ser que use uma própria tag para aumentar a mesma (ou diminuir). Isso também funciona com o enter, com o negrito, com o itálico, com o parágrafo, com imagens, com qualquer coisa. Então, lembre-se sempre disso!

Para finalizar, vemos a baixo a estrutura de uma página HTML:

Código:: <html> <head> <title>Título da Página</title> </head> <body> </body> </html>

Vale lembrar que, para uma boa formatação, as tags devem estar sempre em minúsculo. Falando sobre as tags, a <html> serve para indicar uma página HTML proprimanete dita (porque há outras linguagens de marcação, como o XML). A tag <head> é a delimitadora de todo o conteúdo “não visível” da página, como por exemplo, o título, definido pela tag <title></title>[/code]. Mas afinal, o que seria o título? Em palavras bem sinceras, é aquele nomezinho que aparece no topo da página.

A tag mais importante, sem dúvida, é a tag <body>, pois ela demarca todo o conteúdo “apresentável” da página. É dentro dela que ficará todo o texto do site, a demarcação do layout, etc.

Vamos praticar, então! Abra o Bloco de Notas do Windows, e digite o seguinte:

Código:: <html> <head> <title>Meu Primeiro Site</title> </head> <body> <h1>Título do Site</h1> Esse é um parágrafo Essa é uma linha Essa é outra </body> </html>

Salve este arquivo como PrimeiroSite.html e abra no seu navegador. Veja o resultado! Vimos nesse exemplo uma tag nova, a <h1>. Você deve ter percebido que o texto dentro desta tag ficou maior. E é essa mesma a função dela: indicar cabeçalhos. A tag <h1> deixa o texto no maior tamanho possível, a <h2> deixa o texto um pouco menor que a <h1> e assim por diante, até a <h6>, que deixa o texto bem pequeno.

Exercícios:

1. Monte a estrutura básica de um documento HTML. (0.5 PT)
2. Escreva um código utilizando todos as tags, do <h1> até o <h6>, pulando uma linha para cada um deles. (3.5 PT)
3. Explique a diferença da tagpara a tag (3.5 PT)
4. Para que serve a tag <title>? (2.5 PT)

LEMBRANDO:

Quero os exercícios por MP. Vocês têm o prazo de até Sábado às 23:59 para me entregarem a lição. Vale lembrar que, para utilizar códigos HTML no Fórum, você deve digitá-los dentro do BBCode:

Código:: [code]CÓDIGO AQUI[/code]

Qualquer dúvida... Estou aqui! Boa sorte ^^

por Caio. Seg 18 Jun 2012 - 0:02

Tabela de Notas:

Nome:	Nota:
Hitmonkip	10.0
~Leo	09.0
Charginho	09.5
Blue Thunder	09.3
romuloo	09.0
LeoB	08.0
TsuruGah	X
Löwen	X

Aula #01: Formatação de Textos, Parte I.

Continuando nossa lição anterior, hoje aprenderemos algo bem prático e útil, os comentários. Óbvio, não aprenderemos somente isso, mas é um conceito bem legal de ser trabalhado. As tags que indicam comentários são as seguintes:

Código:: <!—comentário -->

Lembrando que não se deve, então, fechar essa tag – ela é basicamente, sem fechamento, mas possui uma estrutura diferente das outras que vimos anteriormente. Recomendo à todos que usem comentários sempre, para gerar um código limpo e legível.

...E tem mais. Outra função do comentário, além de comentar (óh, é mesmo?) é fazer com que Scripts e Folhas de Estilo sejam ignoradas em navegadores antigos. Isso é algo que veremos num futuro próximo, mas a sintaxe é basicamente a mesma:

Código:: <head> <title>Exemplo</title> <style> <!—inicia CSS -->  </style> </head>

Isso fará com que navegadores novos (que suportam CSS) leiam o código normalmente, e os antigos não, mostrando um site adaptável, sem erros. Lembrem-se caros, de sempre usar comentários!
PS: Comentários NÃO aparecem para o usuário final, por isso você pode enfiar (ui) o que quiser lá.

~X~

Vamos então a principal matéria de hoje: estilização de textos. Ensinarei aqui MUITAS, MUITAS tags em desuso (graças ao CSS), que, de uma forma ou de outra, acabam sendo úteis quando não se quer perder tempo (sim, digo isso mesmo, porque a W3C fez uma palhaçada em colocar, por exemplo, <center> em desuso, assim como a tag .

As principais, e abordadas anteriormente, é a tag , que como vocês disseram no exercício, serve para delimitar todo um parágrafo. A tag , por sua vez, serve para pular uma linha apenas. Podemos usar elas em conjunto, como abaixo:

Código:: <body> Things that I must do: 1. Learn HTML 2. Learn CSS 3. Learn JavaScript 4. Stop listening to Avegend Sevenfold 5. Stop listening to bad and untrue Heavy Metal Bands </body>

Testem esse código em seus navegadores. É um efeito legalzinho de listas, e sim, também existem tags para elas (que serão abordadas bem mais para frente, por enquanto vamos usar os números clássicos mesmo).

Vamos começar a usar esse pequeno teste como base mesmo para tudo que faremos aqui. Primeiramente, que tal deixarmos o título em negrito? Isso também foi ensinado na aula passada (caso tenham visto e praticado NA PRÁTICA (oh rly?) todos os testes), e faz-se através do uso da tag :

Código:: <body> Things that I must do: 1. Learn HTML 2. Learn CSS 3. Learn JavaScript 4. Stop listening to Avegend Sevenfold 5. Stop listening to bad and untrue Heavy Metal Bands </body>

Uma coisa legal sobre a tag é que você também pode deixar as coisas em negrito usando um substituto (mais com sintaxe bem maior), que é a tag . Testem aí, porque não vou encher muito a lingüiça com isso não.

Usando outra tag da aula passada, deixemos todos os números em itálico, para dar um efeito mais atrativo. Lembrem-se, fica em itálico tudo que estiver delimitado pela tag . Não farei um código somente para isso, óbvio. Aprendendo uma tag nova (aí sim farei código), deixaremos algumas partes importantes do texto em sublinhado. Esse efeito é conseguido pela tag e ela é uma tag DEPRECIADA pela W3C, ou seja, considerada obsoleta (e acho ridículo isso, ela tinha seu uso). Temos então o código:

Código:: <body> Things that I must do: 1. Learn HTML 2. Learn CSS 3. Learn JavaScript 4. Stop listening to Avegend Sevenfold 5. Stop listening to bad and untrue Heavy Metal Bands </body>

Enfeitando mais um pouco, vamos usar mais uma tag DEPRECIADA, a tag <center>. Ela tem um nome bem sugestivo: ela alinha o texto ao centro. Por isso, vamos deixar o Things That I Must Do como cabeçalho e centralizado:

Código:: <body> <center><h1>Things that I must do:</h1></center> 1. Learn HTML 2. Learn CSS 3. Learn JavaScript 4. Stop listening to Avegend Sevenfold 5. Stop listening to bad and untrue Heavy Metal Bands </body>

Reparem que neste caso, tirei todas as linhas que havia pulado (para ficar visualmente mais atrativo) assim como mudei a posição da tag , pois é errado considerar qualquer H como um parágrafo. Ele é um cabeçalho, num geral, logo, ele é meio que um parágrafo por si só.

Enfeitando (poxa tchio, isso nunca acaba?) de novo o código, temos as tags e . Elas fazem com que o texto fique superescrito ou subescrito. Se você não sabe o que é isso, bem, faça o exemplo a seguir:

Código:: <body> The Phosphotungstic acid (whose molecular form is H3PW12O40) is a nice and crazy acid who can’t have a H+ in his molecular formula. </body>

Acho que agora ficou mais fácil de entender, não é mesmo? Para encerrar somente por hoje (eu ainda continuarei falando de textos, isso é bem extenso), vou falar da também DEPRECIADA tag , que perdeu seu uso graças ao CSS (nesse caso eu devo concordar com a W3C, mas ainda sim de vez em quando gosto de usar essa tag para coisas mais rápidas).

Com ela, você pode definir basicamente tudo referente à fonte, desde qual será a mesma (Times New Roman, Arial, Calibri, etc), até a cor da mesma, o tamanho, etc. Para isso, ela usa de vários Atributos diferentes. Atributos, como o nome diz bem claramente, é um valor que atribuímos a determinadas "sub-funções" das tags. Existem algumas tags que têm atributos opcionais (geralmente esses são ID, Class, Align, etc, que fazem geralmente maior presença com o uso de CSS) e outras com o uso praticamente obrigatório, como a nossa querida FONT. Vamos então à lista dos 3 atributos suportados:

Color: Define a cor. O valor pode ser o nome da cor em inglês (lembre-se que há um padrão, geralmente ele é Red, Green, Blue, Yellow, White, Black, Orange, Violet, Azure, Brown e Silver. Há outros nomes também, mas não me arrisco a dizê-los aqui por falta de prática com essa tag em desuso) ou seu valor em Hexadecimal, um sistema numérico semelhante ao decimal (base de 10) e ao binário(base de 2), este tendo base de 16 (do 0 à F, que vale 15). Há várias tabelas de cores hexadecimais na web, basta jogar no Google que você encontra rápido. Todo e qualquer valor hexadecimal deve ser procedido do símbolo cerquilha (“#”).

Size: Define o tamanho da fonte. Se não me engano, vai de 1 à 5, a partir disso, o tamanho continua o mesmo (SE NÃO ME ENGANO, pois como comentei, esta tag está em desuso e não é muito importante por enquanto). Vocês não usarão com tanta necessidade assim esse atributo, então não falarei muito dele. Lembre-se apenas que a medida não é Pontos (como no Word) ou Pixels (como no seu editor de imagem) ou muito menos em Cm (como na vida real). É uma medida meio doida aí.

Face: Agora sim, o mais interessante para mim. Ele muda a tipografia, ou seja, o estilo da fonte (Times New Roman, Verdana, etc). As fontes que seguem o estilo da Times são chamadas de Serif, pois possuem serifas, esses pequenos detalhes adicionais nas letras que as da família do Arial (Verdana, Helvetica, Tahoma), não possuem, por isso são chamadas de Sans-Serif (Sem Serifas). Vale lembrar que se você colocar uma fonte que o usuário não tenha no PC, ela não será reconhecida e seu código será todo em vão.

Vamos por em prática isso, então?

Código:: <body> <center><h1>Things that I must do:</h1></center> 1. Learn HTML 2. Learn CSS 3. Learn JavaScript 4. Stop listening to Avegend Sevenfold 5. Stop listening to bad and untrue Heavy MetalBands </body>

Temos, enfim, nosso resultado! Não ficou legalzinho e visualmente mais atrativo? Existem várias fontes legais à serem usadas, não se prenda a uma somente (mas lembre-se de usar uma que exista em quase todos os PCs)! As cores, como já disse, são mais complexas. Eu posso tentar chutar como uma cor ficará em Hexadecimal pois sei toda uma lógica (que não é tão difícil assim, mas não ficarei explicando aqui), mas para vocês será mais fácil mesmo, como eu disse, usar uma tabela dessas encontradas na Web.

Exercícios:

1. Faça dois parágrafos falando sobre uma banda, algum livro, um ator, qualquer coisa que você goste, estilizando-o. Coloque itálico, por exemplo, para citações; negrito para coisas que queira chamar a atenção/enfatizar; sublinhado para coisas importantes. Deixe-o também colorido, adicionando um título, etc (só não faça algo Restart, pfv né). (VALOR: 5,0 PTs.)
2. Explique, com suas palavras e seu entendimento, o conceito de atributos. (VALOR: 2,5 PTs.)
3. Por que é errado usar a tag <hX> dentro de uma tag de parágrafo? (Considerando X como um valor entre 1 e 6). (VALOR: 2,5 PTs.).

Bem, é isso. Vocês têm toda a semana para entregar a lição. Sei que esse tempo é longo, mas nem todas as pessoas têm muito tempo livre. Em breve editarei aqui com a tabela das notas de cada pessoa. Pesso que por favor, façam a lição. Aqueles que deixarem de entregar por duas aulas seguidas perderão as vagas. Só isso. Gostaria também de elogiar o pessoal, vocês foram, num geral, muito bem. É isso Smile

por MEMEMASTER420 Dom 24 Jun 2012 - 3:18

Então, vou sair da escola, pouco tempo, é

por Charge Ter 26 Jun 2012 - 17:23

Saindo também.

por Caio. Ter 26 Jun 2012 - 17:26

Então to fechando a escola bando de gente sem compromisso do kct

por Conteúdo patrocinado

Flaming Phoenix DHTML High School

Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School

Re: Flaming Phoenix DHTML High School