Curso Online de Web Design

Curso Online de Web Design

A tarefa do web designer é a elaboração estética e funcional e a manutenção de um web site. O web designer deve ter a compreensão da apli...

Continue lendo

Autor(a):

Carga horária: 16 horas

Por: R$ 30,00
(Pagamento único)

Certificado digital Com certificado digital incluído

A tarefa do web designer é a elaboração estética e funcional e a manutenção de um web site. O web designer deve ter a compreensão da aplicação em mídia eletrônica de disciplinas como HTML/XHTML, CSS, JavaScript/DHTML, Flash etc. e deve ter conhecimento no uso de software de desenvolvimento voltado para a web.


  • Aqui você não precisa esperar o prazo de compensação do pagamento para começar a aprender. Inicie agora mesmo e pague depois.
  • O curso é todo feito pela Internet. Assim você pode acessar de qualquer lugar, 24 horas por dia, 7 dias por semana.
  • Se não gostar do curso você tem 7 dias para solicitar (através da pagina de contato) o cancelamento ou a devolução do valor investido.*
* Desde que tenha acessado a no máximo 50% do material.
  • Introdução - HTML

    Lucas Leite

  • Os arquivos em HTML – (HyperText Markup Language) - Linguagem de Formatação de Hipertexto - pode ser gerados em qualquer editor de texto. É possível transformar um arquivo .doc (formato Word) para HTML.

    A linguagem HTML utiliza marcações específicas e distintas para dizer ao navegador (Internet Explorer, Firefox, Mozilla, e outros) como exibir o documento.

    Os comandos HTML são chamados de TAGS, compreende as marcas padrões que são utilizadas para fazer indicações a um browser. Assim como em outras linguagens, os comandos têm uma sintaxe própria e seguem algumas regras:

    -> As TAGs aparecem sempre entre os sinais de “menor que” ();
    -> Geralmente são utilizados em pares , sendo que a TAG de finalização de um comando é precedida de uma barra (/).

    A maioria das etiquetas tem a sua correspondente de fechamento:
    .............................................

    De um modo geral, as tags aparecem em pares, por exemplo:

    Cabecalho

    Onde:
    -> A tag

    indica o início na instrução; -> O texto Cabeçalho indica o texto que será formatado; -> E a tag

    indica o final da instrução.

    Lucas Leite

  • O símbolo que termina uma determinada etiqueta é igual aquele que a inicia, antecedido por uma barra ( / ) e precedido pelo texto referente.
    As etiquetas são necessárias, pois servem para definir a formatação de um bloco de texto, e assim marcamos onde começa e termina o texto com a formatação específica por ela.

    PrimeCursos do Brasil

    Há excessões para a utilização dos pares de etiquetas. Por exemplo, a que indica um final de um parágrafo:

    não necessita de uma correspondente

    para terminar a formatação do bloco de texto. A etiqueta que indica quebra de linha
    também não precisa de etiqueta correspondente, entre outras.

    Lucas Leite

  • Criando Documentos HTML

    Lucas Leite

  • Lucas Leite

    Todo documento HTML precisa conter certas tags padronizadas, no mínimo , , e , pois elas constituem as duas partes básicas de um documento HTML que são: o HEAD (cabeçalho) e o BODY (corpo do documento).

    Curso de WebDesign

    Este é o primeiro nível de cabeçalho.

    Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.

    Este é o segundo paragráfo
    A tag contém, entre outras coisas, o (título), e a tag armazena todo o conteúdo do documento, normalmente composto de parágrafos, listas, tabelas, etc.
    Para interpretar corretamente o conteúdo do documento HTML, os browsers esperam informações em acordo com as especificações HTML.

    Abra o bloco de notas, e digite o código acima e salve-o como primeiro.html. Em seguida, abra arquivo primeiro.html no navegador (Internet Explorer, ou outro).

  • Explicação:

    A primeira TAG que encontramos no documento é . Ela é o elemento raiz de um documento HTML, pois dentro dela está todo o conteúdo da página. Esta tag diz ao navegador para iniciar um novo documento HTML, onde o conteúdo que deverá ser exibido esta entre as tags e .

    O texto contido ente as TAG e define o cabeçalho do documento. Estas informações são importantes pois indicam ao navegador a forma que a página deve ser apresentada graficamente.
    A tag define o título da página. Observe a figura 1.1 o topo do navegador, está informado Curso de WebDesign.

    A tag informa ao navegador o que deverá ser exibido graficamente. O corpo da página “BODY” é constituido pelo conteúdo que está entre as tags e .

    Lucas Leite

  • 2.1 ELEMENTOS BÁSICOS
    2.1.1 TÍTULOS

    Todo documento em HTML deve possuir um título. O título é exibido em local separado da página, e é utilizado para identificar o documento em outros contextos, de modo que o título deve indicar claramente o conteúdo do documento.

    As tag utilizadas para títulos são: e .

    Este é o título

    E este o cabeçalho de nível 2

    Aqui entra o texto do documento ...

    Lucas Leite

  • 2.1.2 CABEÇALHO
    Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será o destaque.

    Em geral, os cabeçalhos são exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branca antes e depois do cabeçalhos. O primeiro cabeçalho de uma página deve ser marcada como

    .
     
    COMANDO:
    Texto do Cabeçalho
    Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do cabeçalho.
    COMANDO:

    Cabeçalho nível 1

    Cabeçalho nível 2

    Cabeçalho nível 3

    Cabeçalho nível 4

    Cabeçalho nível 5
    Cabeçalho nível 5

    Lucas Leite

  • 2.1.3 PARÁGRAFO
    A tag

    é utilizada para definir o ínicio de um parágrafo, criando uma linha em branco entre cada parágrafo. O tag

    também é responsável pelo alinhamento dos parágrafos.

    O alinhamento pode ser:
    -> LEFT : Parágrafo alinhado a esquerda. -> CENTER: Parágrafo alinhado ao centro. -> RIGHT: Parágrado alinhado a direita. -> JUSTIFY : Parágrafo justificado.

    Alinhamento de parágrafos

    Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet  (esquerdo).

    Este parágrafo utiliza o alinhamento centralizado

    Este parágrado utiliza o alinhamento à direita.

    Lucas Leite

  • 2.1.4 QUEBRA DE LINHA
    A tag
    é usada para terminar uma linha sem iniciar um novo parágrafo. Esta tag
    , ou “line break”, provoca uma mudança de linha sem acrescentar espaço extra entre as linhas.

    Veja a diferença entre o uso da tag

    e da tag
    :
    MODELO I

    Utilizando a tag p

    Vamos separar esta linha com a marcação de paragráfo.

    Para verificar a diferença.

    Lucas Leite

  • MODELO II

    Utilizando a tag br

    Diferença quando separamos duas linhas utilizando
    a marcação de quebra de linha
    Diferença quando separamos duas linhas utilizando
    a marcação de quebra de linha
    Verificou a diferença?

    2.1.5 COMENTÁRIOS
    Os comentários servem para dizer ao navegador que o conteúdo é apenas anotações e que não devem ser apresentados graficamente na página.
    Os comentários são utilizados para explicar o código fonte para que mais tarde seja possível compreender o que foi feito.
    COMANDO:
    <!-- Comentário da página -->

    Lucas Leite


Matricule-se agora mesmo Preenchendo os campos abaixo
R$ 30,00
Pagamento único
Processando... Processando...aguarde...
Autorizo o recebimento de novidades e promoções no meu email.

  • Conteúdo do Curso!
  • 1° - Introdução - HTML
  • 2° - Criando Documentos HTML
  • 3° - Formatação de Textos
  • 4° - Controle de Cores e Gráficos de Fundo
  • 5° - Links
  • 6° - Listas
  • 7° - Imagens
  • 8° - Tabelas
  • 9° - Cores
  • 10° - Tipologia
  • 11° - Ferramentas do Photoshop
  • 12° - Visualizando as Imagens
  • 13° - Selecionando e Movendo Imagens
  • 14° - Modificando as Seleções
  • 15° - Transformando as Seleções
  • 16° - Ferramentas de Texto
  • 17° - Criações de Arquivos para Web
  • 18° - Vocabúlário Utilizado no Photoshop
  • 19° - Seja um Bom Webdesign
  • 20° - Apresentando o Dreamweaver
  • 21° - Criando um Novo Site
  • 22° - Links e Navegação
  • 23° - Formulários
  • 24° - Dicas para a Criação de um Si