Curso Intensivo de Web Design Online

[Denky]

Minha ideia...

Eu tava pensando, ainda não contribuir com o Fórum com um conteúdo realmente valioso. Então resolvi criar esse Tópico! O Intuito desse Topico nada mais é do que: ensinar a criar SITES desde o basico ate profissionais! Eu tenho um otimo material e nunca usei para nada! então agora que eu to com um tempinho livre, estarei sempre atualizando esse tópico com tudo o que se refere a Web Design...

• Vamos formar alguns WebMaster's aqui no Fórum! o que vcs me dizem?
  

Preciso de pelo menos duas pessoas para me ajudar com um tópico desse nivel... poderíamos dar valor aos assuntos mais FORTES na área tais como:

• HTML, CSS, PHP, Javascript, Jquerye e Mysql entre outros...
  

Algumas videos aulas para:

• Photoshop,
  
• DreamWaver,
  
• FireWorks,
  
• Notpad++,
  
• Emuladores de Web como Wampserver
  

Curso Intensivo de Web Design Online

Exclusividade desse material: L2jBrasil.com

• Tutoriais - HTML e CSS
  
• Video aulas - sobre PHP e Mysql.
  
• Scripts - Jquery e Javascript.
  
• Templates - simples e profissionais.
  

================= INICIO =================

• Vou utilizar um sistema de cursos, para melhor organizar os conteúdos.
  
• Irei separar por áreas de estudos e assuntos dentro de um mesmo tema, assim evitará que vocês se percam no tópico.
  
• Sempre tentarei colocar do modo mais simples de fácil de ser entendido para evitar floods desnecessários.
  
• Qualquer duvida, alguma informação errada, erro de portugues entre outros por favor mandar por PM.
  

-------------------------------------------------

Áreas dos Cursos

@Logica de Programação - Curso FINALIZADO

 

Ultima Atualização do Curso: 03/07/2012

A LÓGICA DE PROGRAMAÇÃO

Base do Conhecimento: Apostilando.com - Autor: Elias Andrade Pereira

1. INTRODUÇÃO

Muitos anos se passaram desde os primórdios da história da comp***ção, mas apesar de já termos vivido vários paradigmas de programação, existe uma base de

conhecimento que não mudou e não mudará nunca – a Lógica de Programação. Faço uma associação direta da Lógica de Programação com o Raciocínio

Matemático, onde o importante é a interpretação de um problema e a utilização correta de uma fórmula, e não a sintaxe pré-definida da mesma. O saber da Lógica está no “praticar”. Não existem “fórmulas” em Informática, o que existe é o aperfeiçoamento de nossa forma de pensar e raciocinar sobre um problema, podendo extrair do mesmo uma solução eficiente e eficaz, sob um determinado ângulo de visão. Assim, verificamos que é preciso aprender a pensar sobre os problemas, extraindo deles o máximo de informações. A solução que criamos para um determinado problema necessita ser exteriorizada e expressa numa linguagem publicamente conhecida. Assim, utilizamos a lógica de programação para desenvolver nossas soluções e os algoritmos para apresentar essas soluções ao mundo. Venho acompanhando nos últimos anos vários livros de Algoritmos e Estruturas de Dados. Todos ensinam como representamos estruturas de controle e atribuições, ou como declaramos variáveis, mas nenhum deles – que eu tenha lido até o momento –, orientou o aluno na forma de pensar. Precisamos mais do que “fórmulas”, precisamos aprender a pensar.

 

Os princípios da programação estruturada surgidos no final da década de 60 – introduzidos por Dijkstra – levaram a necessidade de se ter uma linguagem que

implementasse essas idéias, já que as linguagens de época (FORTRAN, COBOL e BASIC) não permitiam aplicar claramente as técnicas ensinadas. Assim, o professor Niklaus Wirth e seus colegas da Universidade Técnica de Zurique (Suíça) desenvolveram, no início dos anos 70, a linguagem PASCAL – uma derivação da linguagem ALGOL 60, porém de implementação mais simples e com uma estrutura de dados mais poderosa. O nome Pascal foi uma homenagem a Blaise Pascal, famoso matemático, que criou a calculadora baseada em discos de madeira, que foi a predecessora da calculadora de mesa e serviu de inspiração para diversos comp***dores. Assim, nossa apostila oferecerá, inicialmente, conceitos gerais sobre Programação. Posteriormente, vocês terão exercícios de Raciocínio Matemático que lhes exercitarão o poder de PENSAR! Em seguida, apresentaremos como desenvolver algoritmos de soluções para Sistemas. E por último, vamos conhecer a Linguagem Pascal, a fim de vermos nossos algoritmos funcionando – ao vivo e à cores !

 

2. CONCEITOS GERAIS

PROGRAMAÇÃO ESTRUTURADA

A Programação Estruturada pode ser entendida como uma forma de programar que visa facilitar a escrita, entendimento, validação e manutenção de programas. Para

Dijkstra, “a arte de programar consiste na arte de organizar e dominar a complexidade”. A Programação Estruturada procurar reduzir o nível de complexidade através de três níveis:

• a) desenvolvimento do programa em diferentes fases por refinamento sucessivo (desenvolvimento top-down);
  
• b) decomposição do programa total em módulos funcionais, organizados de preferência num sistema hierárquico;
  
• c) uso de um número limitado de estruturas básicas de fluxo de controle dentro de cada módulo.
  

DESENVOLVIMENTO TOP-DOWN

Na Programação Estruturada, ao desenvolvermos um algoritmo, temos como objeto um produto final – o programa. Todavia, para termos esta transição, passamos por

várias fases, no sentido “cima para baixo”, onde cada fase é documentada e principalmente obtida por “refinamento” da fase anterior, até chegarmos a um nível de detalhamento que permita implementar o algoritmo diretamente na linguagem de programação.

 

MODULARIZAÇÃO

A solução final de um problema é obtida através de soluções de subproblemas, o que permite dividir o programa em módulos com subfunções claramente delimitadas, que podem, inclusive, ser implementados separadamente, por diversos programadores de uma equipe.

 

ESTRUTURAS DE CONTROLE

São representadas pela seqüência simples, o comando condicional e o comando repetitivo, e fornecem ao programador um aumento da legibilidade e compreensão de cada módulo de programa. Assim, temos como uma das principais normas da Programação Estruturada : não usar comandos de desvio (GOTO). CONFIABILIDADE

Medimos a confiabilidade de um sistema através de sua resposta ao uso constante, no tocante a:

• não apresentar erros; e,
  
• corresponder às especificações.
  

Atualmente, a sociedade está totalmente dependente dos sistemas de comp***ção. Assim, aumenta exponencialmente a importância do nosso trabalho. Nos fins dos anos 60, constatou-se que as sistemáticas usadas pelos programadores eram os grandes responsáveis pela baixa confiabilidade dos programas. Como solução destes problemas, surgiu a Programação Estruturada (PE).

 

MANUTENIBILIDADE

As revisões sofridas por um programa (releases) tanto para correção de erros quanto para mudanças de especificação, são consideradas como manutenção de software. Os programas devem passar por testes exaustivos de confiabilidade antes de serem colocados em produção. Falhas nesta fase levam a altos níveis de manutenção, que conseqüentemente, levam a altos custos.

 

PSEUDOLINGUAGEM - PORTUGOL

Sabemos que ao desenvolver programas necessitamos de nossa criatividade, para que tenhamos soluções eficazes e eficientes. Todavia, não podemos representar

nossas soluções em algoritmos totalmente escritos em português. Em programação, todas as vezes que executarmos um algoritmo a partir de um estado inicial x, devemos sempre obter o mesmo estado final y. Desta forma, é fácil perceber que a linguagem natural, não formalizada, geraria ambigüidades. Assim, temos o PORTUGOL, que é uma pseudolinguagem de programação (simbiose do Português com o ALGOL e PASCAL), que permite pensarmos no problema e não na máquina que vai executar o algoritmo. Além disso, não perdemos a flexibilidade e continuamos a ter a proximidade com a linguagem humana, facilitando, portanto, a interpretação.

 

3. RACIOCÍNIO MATEMÁTICO

As crianças aprendem facilmente como adicionar e subtrair valores. Suas dificuldades começam no momento em que elas se deparam com problemas e necessitam

identificar quais operações trarão soluções para os mesmos. Vejamos alguns exercícios de Raciocínio Matemático, que ajudarão a “exercitar” nosso cérebro.

• Olhem o Exercício DENTRO DO ARQUIVO NO FINAL DO TOPICO!
  

Agora vamos iniciar uma parte do curso, muito importante... requer muita concentração, e paciência, não tenham pressa, pois é na calma que se chega ao objetivo mais perfeito.

 

4. ALGORITMOS

Segundo Wirth, “programas são formulações concretas de algoritmos abstratos, baseados em representações e estruturas específicas de dados”. De forma bem simples, um algoritmo pode ser definido como “um conjunto de

passos lógicos, bem definidos, que descreve a solução de um problema”. Ao pensarmos na solução de um problema, encontramos ações imperativas que são expressas por comandos. Os algoritmos não são aplicados apenas ao mundo da Informática; pelo contrário, usamos – até sem perceber – algoritmos em todos os momentos de nossa vida. Uma receita de cozinha é claramente um algoritmo.

 

Veja um exemplo:

Faça um algoritmo para “Ir de casa para o trabalho de ônibus”

 

Solução 1

Algoritmo Trajeto_Casa_Trabalho_V1

 

início

Andar até o ponto de ônibus

Aguardar o ônibus

Ao avistar o ônibus correto, fazer sinal

Entrar no ônibus pela porta traseira

Pagar passagem

Escolher um assento e sentar

Quando chegar próximo do local a saltar, dar o sinal para descida

No ponto, descer do ônibus, pela porta dianteira

Andar até o trabalho

fim

 

Veja que resolvemos esse algoritmo em 9 passos, todavia se pedirmos que n pessoas resolva o mesmo problema, provavelmente, teremos n respostas diferentes. Isto ocorre pois, normalmente, abstraímos um problema, de ângulos diferentes, com maior ou menor riqueza de detalhes. Por outro lado, devemos perceber que o algoritmo descrito revela uma situação perfeita, sem condicionais, sem exceções. Assim como na nossa rotina é improvável termos situações perfeitas, essas exceções também ocorrem nos programas de comp***dor. Vamos refazer este algoritmo de forma a introduzir algumas condições.

 

Solução 2

Algoritmo Trajeto_Casa_Trabalho_V2

 

início

1. Andar até o ponto de ônibus

2. Aguardar o ônibus

3. Quando avistar o ônibus correto, fazer sinal

se o ônibus não parar, então

Em pensamento, xingar o motorista

Reclamar para si que vai chegar atrasado

se estiver muito atrasado então

Pegar uma Van

senão

Voltar para o Passo 2

fim-se

senão

se Pessoa >= 65 anos então

Entrar pela porta dianteira

senão

Entrar pela porta traseira

Pagar passagem

se houver troco então

Aguardar troco

fim-se

fim-se

se houver lugar disponível então

Sentar

senão

Escolher o melhor lugar em pé e ali permanecer

fim-se

Quando chegar próximo do local a saltar, dar o sinal para descida

No ponto, descer do ônibus, pela porta dianteira

Andar até o trabalho

fim-se

fim

 

Com certeza, a brincadeira que fiz da condição “Se o ônibus não parar” deve ter levado vocês a pensarem em inúmeras novas condições, como por exemplo: qual seria a sua reação, se num dia de chuva, o ônibus passasse por sobre uma poça e lhe sujasse toda a roupa ?

Veja quão complexo pode se tornar um “simples” algoritmo. Devemos lembrar que detalhes são essenciais na confecção de um algoritmo, todavia, eles devem estar de acordo com o contexto. Além disso, é importante que venhamos a relatar apenas os detalhes relevantes.

Por exemplo, a solução 2 está apropriada para ensinarmos uma pessoa que não está acostumada a andar de ônibus. Todavia, este algoritmo causaria problemas se estivéssemos programando um robô. Considerando esta situação, deveríamos ser mais precisos no passo “Quando chegar próximo do local a saltar, dar o sinal de descida”. Nesse caso, deveríamos dizer “A x metros do local a saltar, dar o sinal de descida” ou “Na altura x

da Rua y ...”.

 

Assim, lembrem-se de usar o BOM SENSO!

 

Podemos pensar também num algoritmo como um “mecanismo” de transformação de entradas em saídas. Assim, um algoritmo ao ser “executado”, receberá

algumas entradas, que serão processadas e nos devolverá algumas saídas.

 

"um bom exemplo seria (o material necessário para fazer um bolo, um cozinheiro e por fim o bolo pronto) O material da entrada, nas mãos do cozinheiro que por sua vez da a saída do bolo pronto!"

 

 

 

 

 

 

 

FLUXO DE CONTROLE EM ALGORITMOS

 

Um algoritmo é um texto estático, onde temos vários passos que são lidos e interpretados de cima para baixo. Para que venhamos a obter o(s) resultado(s) deste

algoritmo, necessitamos “executá-lo”, o que resulta em um processo dinâmico. No fluxo de controle identificamos em cada passo da execução qual é o próximo

comando a ser executado. A compreensão da lógica de programação de um algoritmo está diretamente ligada a compreensão de seu fluxo de controle. A partir de uma compreensão correta, podemos traçar as diversas execuções possíveis de um algoritmo. Se testarmos todas essas possibilidades, e obtivermos resultados corretos, podemos ter certeza de estar entregando um produto final confiável. Os iniciantes no mundo da programação encontram alguma dificuldade em

diminuir a distância conceitual que separa a representação estática de um algoritmo do(s) processo(s) dinâmico(s) de sua execução. É importante frisar que quando nos propomos aentender um algoritmo, lidamos fisicamente com um texto, mas mentalmente temos processos.

 

CRIANDO ALGORITMOS

 

Toda linguagem é composta de sintaxe e semântica, onde a sintaxe corresponde à forma e a semântica corresponde ao conteúdo. Vocês devem aprender a sintaxe dos comandos, mas a principal preocupação deve ser de “como usar esses comandos”. Regras para criação de bons algoritmos

 

1. Use comentários com freqüência. Isto torna o algoritmo mais legível e facilita o entendimento da lógica empregada. Seus algoritmos deverão ser lidos e

entendidos por outras pessoas (e por você mesmo) de tal forma que possam ser corrigidos e receber manutenção.

Obs: Não se esqueça de atualizar os comentários, em caso de manutenção. Pior do que um programa sem comentários, é um programa com comentários errados.

 

2. Use comentários, também, no cabeçalho do algoritmo, incluindo, principalmente:

1. - descrição do que faz o algoritmo
   
2. - autor
   
3. - data de criação
   

3. Escolha nomes de variáveis significativos, todavia evite nomes muito longos.

Ex: Prefira SalBruto ou SalarioBruto ao invés de SB ou VAR1 Prefira TotAlunosAprovDireta ao invés de TotalAlunosAprovacaoDireta 4. Destaque as palavras-chave das estruturas de controle e comandos com sublinhado.

 

Ex: se media >= 7 então

...

senão

...

fim-se

 

5. Utilize espaços e linhas em branco para melhorar a legibilidade.

 

6. Coloque apenas um comando por linha. Vários comandos em uma linha causa ilegibilidade e dificulta a depuração.

 

7. Utilize parênteses para aumentar a legibilidade e prevenir-se de erros.

 

8. Use identação nos comandos de acordo com o nível que estejam, ou seja, alinhe comandos de mesmo nível e desloque comandos de nível inferior.

 

Ex.:

início

comando 1;

se condicao1 então

comando2;

comando3;

senão

comando4;

comando5;

fim-se

comando6;

fim

 

Método para desenvolvimento de algoritmos

• 1. Faça uma leitura de todo o problema até o final, a fim de formar a primeira impressão. A seguir, releia o problema e faça anotações sobre os pontos principais.
  
• 2. Verifique se o problema foi bem entendido. Questione, se preciso, ao autor da especificação sobre suas dúvidas. Releia o problema quantas vezes for preciso para tentar entendê-lo.
  
• 3. Extraia do problema todas as suas saídas.
  
• 4. Extraia do problema todas as suas entradas.
  
• 5. Identifique qual é o processamento principal.
  
• 6. Verifique se será necessário algum valor intermediário que auxilie a transformação das entradas em saídas. Esta etapa pode parecer obscura no início, mas com certeza no desenrolar do algoritmo, estes valores aparecerão naturalmente.
  
• 7. Teste cada passo do algoritmo, com todos os seus caminhos para verificar se o processamento está gerando os resultados esperados. Crie valores de teste para submeter ao algoritmo.
  
• 8. Reveja o algoritmo, checando as boas normas de criação.
  

Conselho: Só tente conseguir o ótimo, depois de realizar o bom.

 

para quem ficou curioso e quer mais, o resto do curso estarei disponibilizando por PDF pelo meu Shared (segue o link do curso COMPLETO) ==>

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

@Redes - Curso FINALIZADO

Aula 1

 

 

 

 

 

 

 

Como Funciona a Internet ?

A Internet é baseada num conceito antigo na comp***ção, conhecido como arquitetura cliente-servidor. Exemplo:Se precisamos retirar um livro, pedimos à bibliotecária. Uma vez localizado, ela entrega o volume e anota na ficha de empréstimo. Neste caso a bibliotecária é a “servidora” de livros, e nós somos os “clientes”.

A arquitetura cliente-servidor sempre envolve um “pedido de informação” (o pedido do livro) e uma resposta (a entrega do livro).

 

 

 

 

 

 

 

Protocolos

Toda a transação entre cliente e servidor envolve um “protocolo”, temos um conjunto de regras que controla a comunicação entre “cliente” e “servidor”

A Internet também funciona baseada em um protocolo:o TCP/IP.

 

TCP – Transmission Control Protocol.

IP – Internet Protocol.

Exemplo de TCP/IP: 200.234.25.188

 

Na Internet, como na maioria das redes, a informação é transmitida em pacotes. Eles são como pequenos envelopes de informação, com remetente e destinatário. O TCP se encarrega de dividir a informação em pacotes, enviá-los pela rede, recebê-los, verificá-los e reagrupá-los. O IP tem a função de encontrar o melhor caminho, através da rede, para o envio dos pacotes . Cada um dos pacotes é independente e pode seguir por caminhos diferentes, até chegar ao destino. Quando recebidos, os pacotes são ordenados e teremos exatamente a mesma informação enviada. Cada pacote recebido é verificado: no caso da ocorrência de erro ele terá de ser reenviado.

 

 

 

 

 

 

 

O que é um site

A Internet era usada para transmitir texto e dados – a interface gráfica que temos hoje com a Web estava muito longe de existir. Foi criada uma linguagem para formatar graficamente as informações e um programa que “entenda” essa linguagem, exibindo para o usuário a formatação original. Um site é simplesmente um conjunto de páginas esses documentos formam um sistema de informação, que pode ir desde uma simples página pessoal até um complexo sistema empresarial. O tamanho de um site é muito variável:pode ter de apenas uma página até milhares delas . Também pode se usar o JAVA e ASP ( Active Server Pages), eles transformam os sites, antes estáticos, em sistemas dinâmico de informação .

 

O que é um Servidor ?

 

Um site deve estar armazenado num servidor web, muitas vezes chamamos de host. A função de um servidor é enviar aas páginas para os “clientes” que a solicitarem. Os “servidores” são comp***dores normais, habitualmente com grande capacidade de armazenamento , que fica permanentemente ligado à Internet por meio de uma linha telefônica dedicada ou de uma rede. Uma característica importante de um servidor é que ele deve ter instalado um software específico, conhecido como web Server, que faz com que o comp***dor “entenda” as solicitações de páginas que ele recebe da Internet e as envie para os usuários no mundo todo.

 

 

 

 

 

 

 

Servidor Web

O Personal Web Server (PWS) terá a importante função de transformar o micro em um servidor web. Ele é fornecido gratuitamente e é indicado para sites de porte médio. Uma característica interessantes dos servidores web é que eles funcionam localmente também, ou seja, mesmo que você não esteja conectado à Internet, poderá acessar as páginas.

 

 

 

 

 

 

 

Dessa forma, podemos testar a funcionabilidade do site exatamente como se ele estivesse na Internet.

 

Assistente de publicação

 

Para publicar um site na Internet é necessário enviar as páginas que fizemos em nosso comp***dor para o servidor Web.

 

Navegador

 

A função dos navegadores é ler uma página em HTML, interpretá-la e exibir ao usuário a página formatada.

Por: Lucas Danilo!

Aula (2 à 5)

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

- curso divido em dois arquivos! TCP-IP 1 e 2

@HTML e CSS: Curso FINALIZADO

 

INTRODUÇÃO AO HTML

 

INTRODUÇÃO AO HTML

 

A linguagem HTML ( sigla de HyperText Markup Language-Linguagem de Marcação de Hipertexto ) é responsável pela criação de documento para a web, as chamadas páginas. E são divulgadas na WWW(World Wide Web) – Teia de alcance Mundial.

 

Por meio dessa linguagem o desenvolvedor pode especificar atributos para um texto(como fonte,tamanho,cor,etc...). E com elas são feitos os Hyperlinks que permitem navegar pela web, para isso, utiliza marcações, chamadas tags, no ponto da página em que é feito uma ligação com outra página.

 

O HTML é um conjunto de tags (marcadores) que é usado pra edição de uma página de Internet e tudo é feito com uma linguagem fácil e simples de se trabalhar.

 

HTML propriamente dito não é uma linguagem de programação e sim uma linguagem de formatação de textos ou definições da estrutura de um site .

 

As páginas da web é um arquivo de texto gravado com uma extensão

(extensão é o que distingue um arquivo de outro) no HTML poderemos usar dois tipos de extensão (*.htm ou *.html).

 

O HTML não necessita de um editor especial, tem que ser um programa de edição de texto que seja capaz de gravar arquivos.

Exemplos: Bloco de Notas do Windows.

 

A Linguagem XML

 

Com todas as facilidades da linguagem HTML ela também não está livre de limitações. Impossibilidade de definição de marcadores (tags), e usando somente os definidos pela linguagem usada.

 

Foi desenvolvido um comitê chefiado por Jon Busak, da Sun Micro Systems, uma especificação que no final de 1996 se tornaria a linguagem XML

 

O XML segue os mesmos princípios básicos do HTML, ou seja, é independente de plataforma, não constitui uma linguagem de programação real e é de domínio público o que significa que não tem dono.

 

Os Marcadores-Padrão da Linguagem HTML

 

Nessa linguagem em vez de instruções e comandos, existem elementos tags ou marcadores, usados para Ativar e Desativar uma determinada formatação de um texto.

 

Um documento HTML dividi-se em várias seções, e cada um deve conter um tipo específico de informações.

 

Cada seção do documento assim traduzindo a estrutura abaixo para a linguagem HTML .

 

Exemplo da estrutura básica do HTML

 

• <html> Início do html;

• <head> Abertura do cabeçalho;

• <title></title> abertura e fechamento do Título da Página;

• </head> Fechamento do Cabeçalho;

• <body> Abertura do corpo do texto;

• </body> Fechamento do corpo do texto;

• </html> Fim do HTML;

 

 

Faça o exemplo abaixo para testarmos esses tópicos:

 

• Abra o Bloco de Notas (Iniciar , Todos os Programas, Acessórios e Clique em Bloco de notas).

 

Digite o código abaixo no Bloco de notas .

 

<html>

<head>

<title> Título da minha página </title>

</head>

<body>

Somente o Fórum da L2JBRASIL oferece Conteúdo Completo e Exclusivo .

</body>

</html>

 

Siga os passos a seguir :

 

• Salve seu trabalho: Clique no Menu arquivo e escolha a opção Salvar como, na caixa Nome do arquivo digite: primeiro.htm, escolha a pasta que você criou para acompanhar nossas aulas e clique em salvar.

 

• Minimize a tela do bloco de notas .

• Abra o Internet Explorer.

• Clique no Menu Arquivo, escolha a opção Abrir.

• Clique no botão procurar.

• Ache a pasta aonde você salvou seus arquivos de nossas aulas e dê um duplo clique em primeiro.htm e olhe como ficou sua página de HTML .

 

Fim da Introdução HTML

 

Cabeçalhos e Títulos

Cabeçalhos e Títulos

 

Os cabeçalhos e títulos são usados para dividir seções do texto, pois permite também saber em que ponto do site ele se encontra ou de qual assunto a página trata.

Existem 6 tipos de cabeçalhos que começa com o H1 e termina no H6, sendo o H1 o maior e o H6 o menor.

 

Faça o exemplo abaixo para testar esse tópico:

 

• Abra o Bloco de Notas (Iniciar, Todos os programas, Acessórios e clique em Bloco de Notas).

 

Digite o códico abaixo no Bloco de Notas .

 

<html>

<head>

<title>Cabeçalhos</title>

</head>

<body>

<h1> Cabeçalho com o tamanho 1 </h1>

<h2> Cabeçalho com o tamanho 2 </h2>

<h3> Cabeçalho com o tamanho 3 </h3>

<h4> Cabeçalho com o tamanho 4 </h4>

<h5> Cabeçalho com o tamanho 5 </h5>

<h6> Cabeçalho com o tamanho 6 </h6>

</body>

</html>

 

• Salve seu trabalho: Clique em Menu arquivo e escolha a opção Salvar como, na caixa Nome do arquivo digite: cabeçalho.htm,Escolha a pasta que você está acompanhando nosso Curso e clique em salvar.

 

• Minimize a tela do bloco de notas .

• Abra o Internet Explorer.

• Clique no Menu Arquivo, escolha a opção Abrir.

• Clique no botão procurar.

• Ache a pasta aonde você salvou seus arquivos de nossas aulas e dê um duplo clique em cabeçalho.htm e olhe como ficou sua página de HTML .

 

 

Parágrafos

Parágrafos

 

Existem dois tipos de paragrafação, são eles <p> e <br>;

 

O comando <p> é utilizado para definir o início de um novo parágrafo, deixando um espaçamento em branco entre cada parágrafo.

 

O comando <br> é utilizado como quebra de linha, quando colocado no texto ele joga automaticamente o texto a sua frente para uma linha abaixo colada com a linha de cima.

 

Faça o exemplo abaixo para testar esse tópico:

 

• Abra o Bloco de Notas (Iniciar, Todos os programas, Acessórios e clique em Bloco de Notas).

 

Digite o código abaixo no Bloco de Notas .

 

<html>

<head>

<title>Parágrafos</title>

</head>

<body>

<p> Este é um exemplo de paragrafação “P” </p>

<p> ele insere uma linha entre os escritos </p>

 

Este é um exemplo de paragrafação “BR” <br>

Ele insere uma quebra de linha e joga o texto colado com a linha de cima

<br>

</body>

</html>

 

 

• Salve seu trabalho: Clique em Menu arquivo e escolha a opção Salvar como, na caixa Nome do arquivo digite: paragrafo.htm,Escolha a pasta que você está acompanhando nosso Curso e clique em salvar.

 

• Minimize a tela do bloco de notas .

• Abra o Internet Explorer.

• Clique no Menu Arquivo, escolha a opção Abrir.

• Clique no botão procurar.

• Ache a pasta aonde você salvou seus arquivos de nossas aulas e dê um duplo clique em paragrafo.htm e olhe como ficou sua página de HTML .

 

 

Linha Horizontal

 

 

Linha Horizontal

 

A linha horizontal é um atributo que inseri uma linha para dividir o texto, separando diferentes tipos de informações.

Ela é representada pelo código <hr>. A linha horizontal tem as propriedades: Altura (size), Largura (width) e Alinhamento (align)

 

Faça o exemplo abaixo para testar esse tópico:

 

• Abra o Bloco de Notas (Iniciar, Todos os programas, Acessórios e clique em Bloco de Notas).

 

Digite o código abaixo no Bloco de Notas .

 

<html>

<head>

<title>Linha Horizontal</title>

</head>

<body>

Linha horizontal

<hr>

<center>

Linha tamanho fixo

<hr size=3 width=130>

Linha de tamanho proporcional

<hr width=50%>

</center>

</body>

</html>

 

• Salve seu trabalho: Clique em Menu arquivo e escolha a opção Salvar como, na caixa Nome do arquivo digite: linha.htm,Escolha a pasta que você está acompanhando nosso Curso e clique em salvar.

 

• Minimize a tela do bloco de notas .

• Abra o Internet Explorer.

• Clique no Menu Arquivo, escolha a opção Abrir.

• Clique no botão procurar.

• Ache a pasta aonde você salvou seus arquivos de nossas aulas e dê um duplo clique em linha.htm e olhe como ficou sua página de HTML .

 

 

 

Aparência de Textos

 

 

Aparência de Textos

 

É perfeitamente possível formatar um determinado texto, dando-lhe uma aparência distinta dos demais. Há marcadores específicos que aplicam uma formatação padrão e também uma formatação personalizada.

 

Na Próxima página possui uma tabela com os principais marcadores para uma formatação personalizada:

 

 

Marcador

 

Descrição

 

Marcadores | Descrição

<b>, </b> | Texto Negrito

<big>, </big> | Texto Grande

<em>, </em> | Texto Enfatizado

<i>, </i> | Texto Itálico

<small>, </small> | Texto Pequeno

<strong>, </strong> | Texto Forte

_, | Texto Subscrito

^, | Texto Sobrescrito

<tt>, </tt> | Texto do tipo máquina de escrever

<u>, </u> | Texto Sublinhado

<strike>, </strike> | Texto Riscado

 

 

 

Muito mais em

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

Curso Gratuito e MUITO BOM!

@PHP e Mysql: Curso INICIADO em 10/12

 

Upando os arquivos para postar...

 

 

 

 

Área das Vídeo Aulas

@Vídeo Aulas:

 

As Vídeos Aulas serão adicionadas no Youtube, seja de minha autoria ou de outros desenvolvedores apenas os Links serão adicionados aqui, para evitar um tamanho muito grande do tópico como também sobrecarga da pagina do tópico...

Em Breve...

 

#Agradecimentos e Créditos Gerais:

Estarei sempre colocando todos os créditos necessários dos autores de algumas videos aulas, conteúdos entre mais que estarei postando aqui nesse tópico,

assim como o site da fonte tirada, OBS: para melhor aprendizado respeitem as lições e lista de cursos.

• Daniel Amaral
  
• Lucas Danilo
  

#Equipe do Tópico:

• Daniel Amaral Nick: BFMV
  
• Lucas Danilo Nick: lucasdanilo
  

 

 

 

# Ultima Atualização: 10/12/2012 - 00:00 #

Estou de volta, e agora irei terminar o que comecei!

Editado Dezembro 10, 2012 por BFMV

[MarphY']

Não seria bem um pedido e sim um desenvolvimento, a área está errada mais a ideia é muito boa, pode contar comigo para a criação de layouts pois tenho umas ideias muito boas somente não sei deixar o site do jeito que quero. Vlw!

[Denky]

acabei de reportar o topico para algum moderador, colocar na area de desenvolvimento... :)

 

mais é isso mesmo @MarphY' quanto mais pessoas se interessarem por essa iniciativa mais rapido estarei tirando o projeto do papel...

ja tenho um topico desenhado no papel... so nao sei organizar bem os topicos... mais vou falar com alguns colegas que ja fazem otimos topicos...

quero dar um material meu pro L2jbrasil tbm hehe sair um pouco do anonimo...

Editado Junho 22, 2012 por BFMV

[Bluur]

Tópico movido... Boa sorte.

[PvPvicio]

É uma boa ideia sobre um tuto de criação de web sites ta precisando mesmo aki no forum.

 

Boa sorte...

[lucasdanilo]

Otima idéia , no que eu puder ajudar , é soh mandar MP =) Tenho Otimo Conteudo pra isso !

[Denky]

estarei agora nessa tarde separando o material ... e pretendo hoje ainda esboçar a ideia para voces darem suas opnioes! começarei pelo HTML... basico! e um pouco de CSS tbm! trabalhando com os seguintes programas: DreamWaver Cs5 ; NotPad++ "o mais atualizado" o FireWorks Cs5 para edição de imagens para Web...

 

gostaria de saber qual o programa que vcs usam para fazer as VideoAulas, para eu começar a fazer tbm... agradeço a todos que estao me apoiando...

 

@Bluur depois quero umas dicas de como organizar o Topico!

 

ainda hoje estarei atualizando o Topico Principal!

[lucasdanilo]

Bom , posso contribuir montando uma apostila em PDF sobre HTML e CSS pra começar ...

Bem explicada , e assim por diante iremos reunindo o Conteudo restante ..

 

Edit // Guarde esse material BFMV ! pois estárei procurando meus cadernos de anotações e vou te passando o conteudo que tenho ..

 

Conteúdo HTML - Retirado do meu Caderno !

Como Funciona a Internet ?

Como Funciona a Internet ?

A Internet é baseada num conceito antigo na comp***ção, conhecido como arquitetura cliente-servidor. Exemplo:Se precisamos retirar um livro, pedimos à bibliotecária. Uma vez localizado, ela entrega o volume e anota na ficha de empréstimo. Neste caso a bibliotecária é a “servidora” de livros, e nós somos os “clientes”.

 

A arquitetura cliente-servidor sempre envolve um “pedido de informação” (o pedido do livro) e uma resposta (a entrega do livro).

 

Protocolos

 

Toda a transação entre cliente e servidor envolve um “protocolo”, temos um conjunto de regras que controla a comunicação entre “cliente” e “servidor”

 

A Internet também funciona baseada em um protocolo:o TCP/IP.

 

TCP – Transmission Control Protocol.

IP – Internet Protocol.

 

Exemplo de TCP/IP: 200.234.25.188

 

Na Internet, como na maioria das redes, a informação é transmitida em pacotes. Eles são como pequenos envelopes de informação, com remetente e destinatário. O TCP se encarrega de dividir a informação em pacotes, enviá-los pela rede, recebê-los, verificá-los e reagrupá-los.

O IP tem a função de encontrar o melhor caminho, através da rede, para o envio dos pacotes .

Cada um dos pacotes é independente e pode seguir por caminhos diferentes, até chegar ao destino. Quando recebidos, os pacotes são ordenados e teremos exatamente a mesma informação enviada.

Cada pacote recebido é verificado: no caso da ocorrência de erro ele terá de ser reenviado.

 

O que é um site

 

A Internet era usada para transmitir texto e dados – a interface gráfica que temos hoje com a Web estava muito longe de existir. Foi criada uma linguagem para formatar graficamente as informações e um programa que “entenda” essa linguagem, exibindo para o usuário a formatação original.

 

Um site é simplesmente um conjunto de páginas esses documentos formam um sistema de informação, que pode ir desde uma simples página pessoal até um

complexo sistema empresarial. O tamanho de um site é muito variável:pode ter de apenas uma página até milhares delas .

 

Também pode se usar o JAVA e ASP ( Active Server Pages), eles transformam os sites, antes estáticos, em sistemas dinâmico de informação .

 

 

O que é um Servidor ?

 

Um site deve estar armazenado num servidor web, muitas vezes chamamos de host. A função de um servidor é enviar aas páginas para os “clientes” que a solicitarem. Os “servidores” são comp***dores normais, habitualmente com grande capacidade de armazenamento , que fica permanentemente ligado à Internet por meio de uma linha telefônica dedicada ou de uma rede.

 

Uma característica importante de um servidor é que ele deve ter instalado um software específico, conhecido como web Server, que faz com que o comp***dor “entenda” as solicitações de páginas que ele recebe da Internet e as envie para os usuários no mundo todo.

 

Servidor Web

 

O Personal Web Server (PWS) terá a importante função de transformar o micro em um servidor web. Ele é fornecido gratuitamente e é indicado para sites de porte médio. Uma característica interessantes dos servidores web é que eles funcionam localmente também, ou seja, mesmo que você não esteja conectado à Internet, poderá acessar as páginas.

 

Dessa forma, podemos testar a funcionabilidade do site exatamente como se ele estivesse na Internet.

Assistente de publicação

 

Para publicar um site na Internet é necessário enviar as páginas que fizemos em nosso comp***dor para o servidor Web.

 

Navegador

 

A função dos navegadores é ler uma página em HTML, interpretá-la e exibir ao usuário a página formatada.

 

 

 

 

 

 

 

INTRODUÇÃO AO HTML

 

INTRODUÇÃO AO HTML

 

A linguagem HTML ( sigla de HyperText Markup Language-Linguagem de Marcação de Hipertexto ) é responsável pela criação de documento para a web, as chamadas páginas. E são divulgadas na WWW(World Wide Web) – Teia de alcance Mundial.

 

Por meio dessa linguagem o desenvolvedor pode especificar atributos para um texto(como fonte,tamanho,cor,etc...). E com elas são feitos os Hyperlinks que permitem navegar pela web, para isso, utiliza marcações, chamadas tags, no ponto da página em que é feito uma ligação com outra página.

 

O HTML é um conjunto de tags (marcadores) que é usado pra edição de uma página de Internet e tudo é feito com uma linguagem fácil e simples de se trabalhar.

 

HTML propriamente dito não é uma linguagem de programação e sim uma linguagem de formatação de textos ou definições da estrutura de um site .

 

As páginas da web é um arquivo de texto gravado com uma extensão

(extensão é o que distingue um arquivo de outro) no HTML poderemos usar dois tipos de extensão (*.htm ou *.html).

 

O HTML não necessita de um editor especial, tem que ser um programa de edição de texto que seja capaz de gravar arquivos.

Exemplos: Bloco de Notas do Windows.

 

A Linguagem XML

 

Com todas as facilidades da linguagem HTML ela também não está livre de limitações. Impossibilidade de definição de marcadores (tags), e usando somente os definidos pela linguagem usada.

 

Foi desenvolvido um comitê chefiado por Jon Busak, da Sun Micro Systems, uma especificação que no final de 1996 se tornaria a linguagem XML

 

O XML segue os mesmos princípios básicos do HTML, ou seja, é independente de plataforma, não constitui uma linguagem de programação real e é de domínio público o que significa que não tem dono.

 

Os Marcadores-Padrão da Linguagem HTML

 

Nessa linguagem em vez de instruções e comandos, existem elementos tags ou marcadores, usados para Ativar e Desativar uma determinada formatação de um texto.

 

Um documento HTML dividi-se em várias seções, e cada um deve conter um tipo específico de informações.

 

Cada seção do documento assim traduzindo a estrutura abaixo para a linguagem HTML .

 

Exemplo da estrutura básica do HTML

 

• <html> Início do html;

• <head> Abertura do cabeçalho;

• <title></title> abertura e fechamento do Título da Página;

• </head> Fechamento do Cabeçalho;

• <body> Abertura do corpo do texto;

• </body> Fechamento do corpo do texto;

• </html> Fim do HTML;

 

 

Faça o exemplo abaixo para testarmos esses tópicos:

 

• Abra o Bloco de Notas (Iniciar , Todos os Programas, Acessórios e Clique em Bloco de notas).

 

Digite o código abaixo no Bloco de notas .

 

<html>

<head>

<title> Título da minha página </title>

</head>

<body>

Somente o Fórum da L2JBRASIL oferece Conteúdo Completo e Exclusivo .

</body>

</html>

 

Siga os passos a seguir :

 

• Salve seu trabalho: Clique no Menu arquivo e escolha a opção Salvar como, na caixa Nome do arquivo digite: primeiro.htm, escolha a pasta que você criou para acompanhar nossas aulas e clique em salvar.

 

• Minimize a tela do bloco de notas .

• Abra o Internet Explorer.

• Clique no Menu Arquivo, escolha a opção Abrir.

• Clique no botão procurar.

• Ache a pasta aonde você salvou seus arquivos de nossas aulas e dê um duplo clique em primeiro.htm e olhe como ficou sua página de HTML .

 

Fim da Introdução HTML

 

Cabeçalhos e Títulos

Cabeçalhos e Títulos

 

Os cabeçalhos e títulos são usados para dividir seções do texto, pois permite também saber em que ponto do site ele se encontra ou de qual assunto a página trata.

Existem 6 tipos de cabeçalhos que começa com o H1 e termina no H6, sendo o H1 o maior e o H6 o menor.

 

Faça o exemplo abaixo para testar esse tópico:

 

• Abra o Bloco de Notas (Iniciar, Todos os programas, Acessórios e clique em Bloco de Notas).

 

Digite o códico abaixo no Bloco de Notas .

 

<html>

<head>

<title>Cabeçalhos</title>

</head>

<body>

<h1> Cabeçalho com o tamanho 1 </h1>

<h2> Cabeçalho com o tamanho 2 </h2>

<h3> Cabeçalho com o tamanho 3 </h3>

<h4> Cabeçalho com o tamanho 4 </h4>

<h5> Cabeçalho com o tamanho 5 </h5>

<h6> Cabeçalho com o tamanho 6 </h6>

</body>

</html>

 

• Salve seu trabalho: Clique em Menu arquivo e escolha a opção Salvar como, na caixa Nome do arquivo digite: cabeçalho.htm,Escolha a pasta que você está acompanhando nosso Curso e clique em salvar.

 

• Minimize a tela do bloco de notas .

• Abra o Internet Explorer.

• Clique no Menu Arquivo, escolha a opção Abrir.

• Clique no botão procurar.

• Ache a pasta aonde você salvou seus arquivos de nossas aulas e dê um duplo clique em cabeçalho.htm e olhe como ficou sua página de HTML .

 

 

Parágrafos

Parágrafos

 

Existem dois tipos de paragrafação, são eles <p> e <br>;

 

O comando <p> é utilizado para definir o início de um novo parágrafo, deixando um espaçamento em branco entre cada parágrafo.

 

O comando <br> é utilizado como quebra de linha, quando colocado no texto ele joga automaticamente o texto a sua frente para uma linha abaixo colada com a linha de cima.

 

Faça o exemplo abaixo para testar esse tópico:

 

• Abra o Bloco de Notas (Iniciar, Todos os programas, Acessórios e clique em Bloco de Notas).

 

Digite o código abaixo no Bloco de Notas .

 

<html>

<head>

<title>Parágrafos</title>

</head>

<body>

<p> Este é um exemplo de paragrafação “P” </p>

<p> ele insere uma linha entre os escritos </p>

 

Este é um exemplo de paragrafação “BR” <br>

Ele insere uma quebra de linha e joga o texto colado com a linha de cima

<br>

</body>

</html>

 

 

• Salve seu trabalho: Clique em Menu arquivo e escolha a opção Salvar como, na caixa Nome do arquivo digite: paragrafo.htm,Escolha a pasta que você está acompanhando nosso Curso e clique em salvar.

 

• Minimize a tela do bloco de notas .

• Abra o Internet Explorer.

• Clique no Menu Arquivo, escolha a opção Abrir.

• Clique no botão procurar.

• Ache a pasta aonde você salvou seus arquivos de nossas aulas e dê um duplo clique em paragrafo.htm e olhe como ficou sua página de HTML .

Editado Junho 21, 2012 por lucasdanilo

[Bruno Fontes]

Muitoo Bom hiem', Gostei da Iniciativa de Vocês Meus parabéns *-*'

 

Editado Junho 21, 2012 por Bruno Fontes

[Matthew Adams]

Olha to gostando de ver isso, muita gente vai aprende fazer site rapidinho =D

 

Parabéns pra que esta ajudando e contribuindo!

Editado Junho 21, 2012 por Matthew Adams

[Denky]

Hoje Estarei iniciando o curso de Logica de programação... esse curso tera duração de 1 mes! será atualizado a cada 3 e 3 dias no maximo! espero que vcs apreciem o material...

Editado Julho 19, 2012 por BFMV

[stonebreacker]

Otima iniciativa, Estou no aguardo, preciso aprender muita coisa ainda e esse intensivo ajudara muito, nao so eu , como muitos outros aqui! APOIADO.

 

Curta ae >>>>>>>>>>>>>>>>

[BySouza]

ÓTIMO PARABÉNS .

E BOA SORTE ^^

ESTAMOS PRECISANDO DE TRABALHOS COMO ESSES :)

[Ivan Pires]

Muito bom, parabéns pelo projeto, vai ser muito bom!

Eu infelizmente não tenho tempo para contribuir(fazer video aulas ou tutoriais escritos) com este projeto agora, mas vou acompanhar, qualquer coisa eu dou um toc. =D

Abraço.

[lucasdanilo]

# Conteúdo HTML

 

Linha Horizontal

Linha Horizontal

 

A linha horizontal é um atributo que inseri uma linha para dividir o texto, separando diferentes tipos de informações.

Ela é representada pelo código <hr>. A linha horizontal tem as propriedades: Altura (size), Largura (width) e Alinhamento (align)

 

Faça o exemplo abaixo para testar esse tópico:

 

• Abra o Bloco de Notas (Iniciar, Todos os programas, Acessórios e clique em Bloco de Notas).

 

Digite o código abaixo no Bloco de Notas .

 

<html>

<head>

<title>Linha Horizontal</title>

</head>

<body>

Linha horizontal

<hr>

<center>

Linha tamanho fixo

<hr size=3 width=130>

Linha de tamanho proporcional

<hr width=50%>

</center>

</body>

</html>

 

• Salve seu trabalho: Clique em Menu arquivo e escolha a opção Salvar como, na caixa Nome do arquivo digite: linha.htm,Escolha a pasta que você está acompanhando nosso Curso e clique em salvar.

 

• Minimize a tela do bloco de notas .

• Abra o Internet Explorer.

• Clique no Menu Arquivo, escolha a opção Abrir.

• Clique no botão procurar.

• Ache a pasta aonde você salvou seus arquivos de nossas aulas e dê um duplo clique em linha.htm e olhe como ficou sua página de HTML .

 

Aparência de Textos

Aparência de Textos

 

É perfeitamente possível formatar um determinado texto, dando-lhe uma aparência distinta dos demais. Há marcadores específicos que aplicam uma formatação padrão e também uma formatação personalizada.

 

Na Próxima página possui uma tabela com os principais marcadores para uma formatação personalizada:

Marcador

Descrição

Marcadores | Descrição

<b>, </b> | Texto Negrito

<big>, </big> | Texto Grande

<em>, </em> | Texto Enfatizado

<i>, </i> | Texto Itálico

<small>, </small> | Texto Pequeno

<strong>, </strong> | Texto Forte

_, | Texto Subscrito

^, | Texto Sobrescrito

<tt>, </tt> | Texto do tipo máquina de escrever

<u>, </u> | Texto Sublinhado

<strike>, </strike> | Texto Riscado

Editado Junho 22, 2012 por lucasdanilo

[Denky]

para quem está acompanhado o curso de logica de programação... começamos agora a parte seria! Aula 3 - Algorítimo!

espero que estejam gostando do conteúdo!

[Adriano]

Otima iniciativa, quero ver o final =D

[Denky]

tópico principal atualizado, continuação do assunto ALGORÍTIMOS

ainda hoje estarei fazendo uma enquete para ver como anda as visitas ao tópico, e terminando o curso sobre redes, pois o material já esta separado!

espero que todos estejam curtindo...

[LucasStark]

eu também achei essa necessidade aqui no fórum de Web Designs, por isso já corri logo pra essa área aqui :D só o infeliz do photoshop que que eu não conseguo aprender KK e fora isso as linguagens, tô aprendendo bem ,html,css,php e tals:D

[Felipe Othon]

Conte comigo para o que necessitar! rs

[Maxwellx]

Tem data pra postar o de PHP Mysql ?

[Allan Alcantara]

que bacana vê isso.

Cara seguinte no que vocês precisarem, estarei a dispor, só mandar MP! abraços.

[Denky]

essa semana estarei terminando o curso de redes e logica, e semana q vem estarei inicando o de HTML e CSS, logo apos um dos mais esperados creio eu, Mysql e PHP... mais o de PHP vai demorar um pouco ainda!

[Denky]

Curso de Logica de Programação Terminado! O curso de HTML e PHP por muitos pedidos de PM vai ser iniciado Iqualmente...

PHP (de inicio) apenas algumas Videos Aulas serao Disponibilizadas, o Material escrito sera apenas de HTML! o Curso de Redes vai ser terminado em no maximo 3 dias, estive enfrentando alguns problemas pessoais, por isso demorei tanto para atualizar, peço desculpa pela demora e agradeço a quem esta seguindo e curtindo o projeto :)

[Denky]

algum moderador poderia dar o direito de LucasDanillo poder editar o topico tbm, porq eu to em tratamento medico e nao to podendo dar continuidade ao projeto agora... ficaria muito agradecido! Obg Pela Atenção!