Como Criar um Site do Zero

219 visualizações

Publicada em

Neste ebook você irá aprender na prática como desenvolver um website do zero. Inicialmente você aprende sobre HTML, suas tags e como usá-las. Depois passa por uma introdução ao CSS que é a linguagem de marcação e como interpretá-la e usá-la. No módulo de JavaScript você aprende o básico para usar e entender como funciona ao usar bibliotecas como Jquery por exemplo. você irá aprender de forma rápida como criar seu primeiro site.

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
219
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Como Criar um Site do Zero

  1. 1. 2 Desenvolvimento web www.triway.com.br Índice Introdução 3 Estrutura HTML 4 Elementos HTML 6 Tags e Elementos HTML 6 Elementos de parágrafos 9 Elemento head 8 Elementos de formatação 9 Atributos 16 Imagens 18 Links 20 Listas 21 Div 23 Tabelas 25 Meta tags 29 Comentários 30 Formulários 31 Introdução ao CSS 35 Seletores 35 Cores e Medidas 38 Linkando CSS ao HTML 41 Dicas 42 Comentários em CSS 43 Introdução ao JavaScript 47 Inserinso JavaScript 48 Variáveis 50 Operadores 51 If e Else 54 For e While 55 Funções 57
  2. 2. 3 Desenvolvimento web www.triway.com.br O HTML sigla que significa HyperText Markup Language, é uma linguagem de marcação de hipertexto, criado por Tim Benners-lee por volta de 1990, e passou por vári- as revisões e versões. Hoje o HTML se encontra na versão 5 onde ele sofreu várias apri- morações facilitando ainda mais a vida dos desenvolvedores front-end. O HTML é mantido pela W3C - World Wide Web Consortium ,que é um consórcio formado por empresas e instituições educacionais, fundada em 1994, onde seu objetivo é, estabelecer padrões para várias áreas e desenvolvimento web. Em 1997 o grupo lançou o HTML 4, e praticamente junto, poucos meses depois, foi publicado o XML 1. Em 1998 foi iniciado a reescrita do HTML em XML, o que originou o XHTML 1 que foi lançado em 1999, e em Maio de 2001 foi publicado o XHTML 1.1. Como o HTML ficou bastante tempo estagnado sem nenhum tipo de melhoria ou novas versões, em 2004 foi fundada a WHATWG - Web Hypertext Application Technology Working Group - que era composta por membros do XForms, um grupo que trabalhava em paralelo com a W3C, mas voltada para formulários em HTML. O WHATWG é o grupo de trabalho tecnológico de aplicações de hi- pertexto para Web. Trata-se de um grupo livre, não oficial e de colaboração dos desenvolvedores de navegadores e de seus inter- essados. Mas em 2006 Tim Benners-lee reconheceu o grande feito pelo pessoal da WHATWG e anunciou que eles deveriam trabalhar juntos de forma unificada, foi a partir daí que começou os primei- ros passo para o HTML 5. Introdução | Módulo I H T M L Hyper Text Markup Language Introdução ao HTML Linguagem de Marcação de Hipertexto
  3. 3. 4 Desenvolvimento web www.triway.com.br Estrutura HTML Todo documento HTML deve conter as extensões html ou htm. Ele pode ser escrito por qualquer editor de texto, como o bloco de notas por exemplo. Como já mencionado o HTML, não é uma linguagem de programação, e sim um linguagem de marcação de hipertexto. Para escrevermos documentos HTML usamos como ferramenta IDE ( Integrat- ed Development Environment ou Ambiente Integrado de Desenvolvimento), que é um programa de computador que reúne características e ferramentas de apoio ao desenvolvimento de software com o objetivo de agilizar este processo. Existe várias IDE´s muito boas no mercado, algumas pagas e outras distribuídas gratuitamente. No nosso cur- so iremo usar o Notepad ++. Todo documento HTML deve obrigatoriamente obedecer um padrão de estrutura como na imagem abaixo, isso se deve para que seja executado corretamente pelo navegador. | Módulo I Estrutura do HTML IDE Integrated Development Environment Ambiente Integrado de Desenvolvimento
  4. 4. 5 Desenvolvimento web www.triway.com.br 1 | <!doctype html> : O doctype não é uma tag HTML, ele é uma instrução necessária para que o navegador saiba que tipo e versão de documento ele deverá executar. O doc- type deve ser escrito na primeira linha do seu documento HTML e antes da tag html. Em versões anteriores, era necessário referenciar o DTD diretamente no código do Doctype. Com o HTML5, a referência por qual DTD utilizar é responsabilidade do Browser. 2 |html: esta tag indica que ali começa o HTML. O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento. Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser uti- lizado em qualquer outro elemento para indicar o idioma do texto representado. Todas as outras tags e elementos devem estar dentro desta tag. 3 | head: O head funciona como o cabeçalho do documento HTML. É nele que você in- sere arquivos de folha de estilo (CSS), javascript e metadados. Metadados são informações sobre a página e o conteúdo ali publicado. O título da página ou do site, é inserido dentro desse elemento usando o elemento <title>, que é escrito com a tag <title> … </title>. 4 | body: Esta tag é responsável pelo corpo da página HTML, ou seja, tudo que estiver dentro dela, será exibido na tela do computador. Esta é a estrutura base de um documento HTML. Essa estrutura deve ser sempre respeitada, isso evita de sua página não ser executada, ou apresentar erros no navegador. | Módulo I Estrutura do HTML 1 – doctype 2 - html 3 - head 4 - body
  5. 5. 6 Desenvolvimento web www.triway.com.br Tags e Elementos HTML O que são TAGS? E o que são Elementos? Tag´s HTML Tags e Elementos HTML Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Toda tag deve ser escrita dentro de < e >. Existe dois tipos de tag: as de abertura de um elemento: <nome da tag>, e as de fechamento: </ nome da tag>. Sempre que uma tag for aberta, ele deve ser fechada, isso mostra para o navegador onde você quer a aquela formatação ou elemento termine.
  6. 6. 7 Desenvolvimento web www.triway.com.br Elementos são componentes de um arquivo HTML. Elementos em HTML são compostos por tags. | Módulo II Elementos HTML Tags e Elementos HTML <html> <html> ... </html> TAGS Elementos Tags e Elementos HTML O que são TAGS? E o que são Elementos?
  7. 7. 8 Desenvolvimento web www.triway.com.br O Elemento head, como muitos dizem, é a parte inteligente do documento HTML. É nele, que inserimos, arquivos externos como CSS e JavaScript, Metadatas, que auxiliam os motores de buscas a indexarem sua página, o Título, chave de caracteres etc. O elemento head é formado pela tag head (<head> </head>), e ele deve ser escrito no topo do docu- mento, dentro da tag <html> </htm>. Como vimos em capítulos anteriores, o documento HTML possui um a estrutura própria e que deve ser rigidamente obedecida, então a forma correta de se inserir o ele- mento head é como no exemplo a baixo <!doctype html> <html lang=”pt-br”> <head> <title>Meu site - Página Principal</title> ... </head> … Note que como dissemos o elemento head é o primeiro elemento inserido dentro do elemento HTML. Outra regra muito importante é do elemento title (<title> … </title>). Como o próprio nome mostra, ele é o responsável pelo título da página, que é exibido na barra do navegador. Esse elemento deve estar obrigatória mente dentro do elemento head. Elemento head | Módulo II Elemento<head> <!doctype html> <html lang=”pt-br”> <head> <title>Meu site - Página Principal</title> ... </head> …
  8. 8. 9 Desenvolvimento web www.triway.com.br Elementos de parágrafos Parágrafos são muito usados em textos, tanto em páginas web como em docu- mentos de texto etc. Eles separam assuntos e deixam os textos mais organizados. No HTML, ele possui a mesma função. Um elemento de parágrafo é constituído pela tag <p> … </p>. Veja um exemplo: <p> Este é um parágrafo. <p> <p> Este é outro parágrafo. </p> Parágrafos e Headers <p> ... </p> <p> Essa marcação informa um novo parágrafo </p> Essa marcação informa o término do parágrafo
  9. 9. 10 Desenvolvimento web www.triway.com.br O Resultado no navegado é esse: Note que o resultado é como um parágrafo de um documento de texto comum. Ele salta uma linha e começa o outro parágrafo. | Módulo II
  10. 10. 11 Desenvolvimento web www.triway.com.br Headers Os headers são maracadores, muito usados em títulos de páginas, são escritos com a tag <h1> … </h1> e vai da tag <h1> até a <h6>. Essa numeração corresponde ao nível de importância do título na página, ou seja, o <h1> é o mais importante e <h6> é o menos importante. Dica: Sempre coloque o título da página com a tag <h1>, pois como ele simboliza o título mais importante, os mecanismos de busca o indexa como a sua tal importância. Use <h1> para títulos, <h2> para subtítulos, <h3> para nomes de blocos (exemplo: menu). Parágrafos e Headers <h2>Este é um header</h2> <h6>Este é um header</h6> <h5>Este é um header</h5> <h4>Este é um header</h4> <h3>Este é um header</h3> Este é um header Este é um header Este é um header Este é um header Este é um header <h1>Este é um header</h1> Este é um header
  11. 11. 12 Desenvolvimento web www.triway.com.br | Módulo II Elementos de formatação No HTML existe elementos de formatação de texto, assim como nos programas de edição de texto, como o Microsoft Word. Formatação como itálico, negrito, texto à esquer- da, centralizado, justificado. Algumas dessas formatações podem ser feitas de forma mais semântica pelo css, mas iremos ver alguns desses elementos para que você conheça um pouco mais. Itálico - <i> … </i> Para deixar uma palavra, uma frase ou um parágrafo em itálico, usamos o elemento <i> ... </i>. Exemplo: <i> Este parágrafo esta em itálico </i> Veja o resultado no navegador. Elementos de Marcação e Formatação <p> Sed ut perspiciatis unde <b>omnis iste</b> natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo <i>inventore</i> veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam <strong>voluptatem</strong> quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. <span style=“color:red”>Neque porro</span> quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
  12. 12. 13 Desenvolvimento web www.triway.com.br Negrito - bold <b> … </b> Para se fazer o mesmo com negrito usa-se o elemento bold que é escrito com as tags <b> … </b>. Veja o exemplo. <b>Este parágrafo esta em Negrito.</b> Veja o Resultado no navegador. Um outro elemento que tem o mesmo resultado do elemento bold é o elemento strong <strong> ... </strong>. Exemplo. <strong> Este parágrafo esta com o elemento strong. </strong> Veja uma comparação. Note que a diferença e nenhuma. Geralmente se dá propriedades diferentes para cada elemento desse no CSS, diferenciando um do outro, visualmente falando. | Módulo II
  13. 13. 14 Desenvolvimento web www.triway.com.br | Módulo II span - <span> … </span> O elemento span <span> … </span>, visualmente ele não altera em nada na pala- vra ou no texto que ele esta marcando, mas geralmente usa-se ele para fazer alguma mar- cação no texto, como cor por exemplo. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos class ou id ), ou para compartilhar valores de atributos como lang. Ele deve ser usado somente quando nenhum outro elemento semântico for apropriado. <span> é muito parecido com o elemento <div> , entretando <div> é um elemento de nível de bloco enquanto <span> é um elemento em linha. Veja um exemplo. Sem nenhuma propriedade. <span> Este parágrafo esta dentro de um span </span> Com propriedade <span style=”color:blue”> Este parágrafo esta dentro de um span com uma pro- priedade</span> Veja o Resultado. Mais alguns elementos de formatação No html, existe ainda muito mais elementos de marcação/formatação de texto, e com a chegada do html 5 esses elementos aumentaram de número. Vamos citar alguns para que você fixe na mente. Todos eles estão no nosso guia de referência. em - <em> … <em> Funciona como o itálico, ele dá enfânse à alguma parte do texto.
  14. 14. 15 Desenvolvimento web www.triway.com.br | Módulo II cite - <cite> … </cite> Muito usado para citações, como nome de autores, músicas, filmes, frase de alguém etc. pre - <pre> … </pre> Este elemento é usado para mostrar um bloco de código. small - <small> … </small> O elemento small ele apresenta o texto com o tamanho da fonte um pouco menor. Esses são alguns elementos do html, veja a lista completa no guia de referência.
  15. 15. 16 Desenvolvimento web www.triway.com.br Atributos <p style=“color:red;”> Este é um parágrafo para a aula sobre atributos </p> Este é um parágrafo para a aula sobre atributos Elementos em HTML têm atributos , que são valores adicionais que configuram os elementos ou ajustam seu comportamento de várias maneiras para cumprir os critérios que os usuários querem. No HTML existem muitos atributos, mas iremos citar o mais usados. Todos os atributos devem seguir a seguinte sintaxe: nome=”valor”, onde nome é o nome do atribu- to seguido do sinal de igual ( = ), e valor é o valor da propriedade dentro de aspas, duplas ou simples. alt | Altenative text O atributo alt, é usado em elementos de imagem. Ele exibe um texto no caso de ocorrer algum erro e a imagem não for exibida. title | Título ítulo é bastante usado em descrições de elemento. Sua função é exibir um texto em forma de caixa quando se passa o mouse em cima do elemento. src | Url de arquivos Este atributo tem como função informar o endereço url de arquivo externos que serão inseridos no documento HTML, como imagens, arquivos de áudio e vídeo, scripts etc. Atributos
  16. 16. 17 Desenvolvimento web www.triway.com.br | Módulo II rel | Relações entre links O atributo rel especifica a relação entre o objeto de destino para o objeto link. language | Tipos de script Este atributo é usado basicamente quando se irá inserir um bloco ou arquivo de script no HTML. Ele especifica o tipo de script que esta sendo inserido. lang | idioma do conteúdo Como já vimos, o atributo lang é usado para informar o idioma da página html. Mas este atributo não é exclusivo da tag <html>. Ele pode ser usado em qualquer tag ou bloco do seu documento HTML exercendo a mesma função, de informar o idioma do conteúdo do bloco, parágrafo etc. id | Identificação de elementos únicos Um dos atributos que mais se usa em documentos HTML. Este atributo identifica um elemento com um nome que você pode criar. É como você pegar um elemento do códi- go e dar um nome a ele. Muito útil pois com essa identificação, você pode formatá-lo pelo CSS, criando regras para aquele especifico elemento. class | Formatações mais amplas O atributo class, é bastante usado para formatação em css para elementos que pos- suem propriedades em comum. href | Linkando O href serve exclusivamente para linkar. Ele faz a linkagem entre páginas, arquivos, mídia, arquivo para download etc. height | Altura O atributo height é usado quando precisamos especificar altura de elementos. Pode ser de parágrafos, blocos, imagens etc. width | Largura Tem a mesma funcionalidade do height mas ele é responsável pela largura. Esse são os atributos mais usados, que praticamente você irá se cansar de escrever, mas o HTML possui muito mais atributos que está no guia de referência. Nosso objetivo aqui é deixar bem claro o que é um atributo e como usá-lo.
  17. 17. 18 Desenvolvimento web www.triway.com.br | Módulo II O uso de imagens na web é essencial, tanto para deixar uma informação mais clara como para deixar sua página mais bonita e atraente, afinal, uma imagem vale por mil pala- vras. Para inserir uma imagem no documento HTML usa-se a tag <img />. um diferencial que essa tag tem das outras tags é que ela é aberta e fechada numa tag só. Você não usa <img> </img> e sim <img />. Para criar um elemento de imagem é preciso usar a tag <img /> mais o atributo src, que como vimos no capítulo passado tem a função de inserir a url de um arquivo externo. Veja o exemplo: <img src=”/images/minha-imagem.jpg” /> Outros atributos podem ser usados em imagens como id, class, heigth, width, alt e title. O atributo alt é obrigatório em imagens pois além de auxiliar os mecanismos de Imagens <img src=“url da image” /> Imagens
  18. 18. 19 Desenvolvimento web www.triway.com.br busca como o Google indexar sua imagem, ele mostra uma texto quando essa imagem não estiver disponível para exibição. Use o atributo title, para uma breve descrição da imagem, isso também ajuda os robôs do Google e width e height para redimesionar a imagem, aju- stando a tela e ao texto. Exemplo: <img src=”imagens/minha-imagem.jpg” alt=”Jogador fez o gol da vitória do time tal” title=”gol do jogador que garantiu a vitória do time tal sobre o outro tima” width=”150px” height=”160px” id=”image” class=”bordada”/> Os valores dos atributos width e height, podem ser em pixels ou em porcentagem. Qualquer arquivo de imagem pode ser inserido no documento html como, jpg, png, gif, bmp etc. Para evitar problemas com a exibição de suas imagens, é bom você sempre prestar atenção em pequenos detalhes que acarretam erros de exibição. Nome do arquivo. Nos endereços da web ou url, não são permitidos caracteres especiais, acentos e es- paços, como ç, ~, ´. Colocar esse tipo de caracteres nos nomes dos arquivos irá gerar erro de exibição, ou seja, sua imagem não será exibida. Sempre coloque o nome dos arquivos com letras minúsculas e no lugar espaço como hífen (-), e a extensão correta do arquivo (.jpg ou .jpeg). Exemplo: <img src=”imagens/minha-imagem.jpg” /> Sempre use endereços reais. Sempre prefira colocar endereços absolutos das imagens, e não a navegação entre as pastas. Exemplo <img src=”../images/minha-imagem.jpg” /> <img src=”http://www.meusite.com.br/imagens/minha-imagem.jpg” /> Confira o tamanho das imagens Sempre que você navega na internet, quando você entra num site, você precisa es- perar o conteúdo carregar. Quando se usa imagens muito grandes, de alta resolução esses sites demoram e muito para carregar. Recorte as imagens, para o tamanho que deseja apresentar na tela, use imagens grandes apenas quando realmente for necessário, como uma galeria de imagens. | Módulo II
  19. 19. 20 Desenvolvimento web www.triway.com.br Links são âncoras ou ligações entre páginas, imagens arquivos etc. Um link é escrito com a tag <a> </a>, e pode receber vários atributos, como href, alt, title, taregt, rel, id, class. Um link deve seguir a seguinte sintaxe. <a href=”endereço para onde vai o link”>Meu link</a> O atributo href é obrigatório, pois é ele que vai informar para onde o link irá dire- cionar o usuário. Outros atributos como id e class são usados para a formatação com CSS. Um atribu- to que é muito usado em links é o atributo target, que informa o navegador onde ele deverá abrir o a url informada no atributo href. O atributo target possui 5 valores : _blank: Abre a url em uma nova janela, guia ou aba. _self: Abre a url na mesma janela, guia ou aba onde foi clicada. _parent: Abre a url no fameset pai. _top: Abre a url no corpo inteiro da janela. framename: Abre a url em um quadro chamado. Exemplos: Este exemplo vale para os valores _blank, _self, _parent, _top. <a href=”http://www.3way.com.br” target=”_blank” >Meu link</a> Este exemplo vale para o framename. <a href=”http://www.3way.com.br” target=”nomedoframe”>Meu link cno frame</a> Links | Módulo II Links <a href=“url destino”> Nome do link </a>
  20. 20. 21 Desenvolvimento web www.triway.com.br Listas <ol> <li>Item 01</li> <li> Item 02</li> ... </ol> Ordenadas <ul> <li>Item 01</li> <li> Item 02</li> ... </ul> Não ordenadas Listas As lista são bem úteis no html. Com elas podemos listar de forma organizada, por exemplo, uma lista de links e páginas. As listas são muito usadas para criar menus de navegação, tanto na vertical como na horizontal. Existem dois tipos de listas as ordenadas e as não ordenadas, onde uma ordena os itens numerando-as e a outra não. Listas Ordenadas Listas ordenadas são escritas com as tags <ol> … </ol>, e seus itens de lista com a tag <li> … </li>. Exemplo: <ol> <li>Item 01</li> <li>Item 02</li> <li>Item 03</li> </ol> Veja o resultado no navegador Veja que foi criada uma lista ordenada de 1 a 3. | Módulo II
  21. 21. 22 Desenvolvimento web www.triway.com.br Listas não ordenadas As listas não ordenadas sege a mesma semântica, porém ela usa outra tag. Para lis- tas não ordenadas é usada a tag <ul> … </ul> no lugar <ol> … </ol>. Os item mantém a mesma tag <li> … </li>. Exemplo: <ul> <li>Item 01</li> <li>Item 02</li> <li>Item 03</li> </ul> Veja o resultado no navegador As listas dos dois tipos podem receber os atributos id e class, e seus itens também. Exemplo: <ul id=”menu” class=”azul”> <li id=”home”>Item 01</li> <li id=”sobre” class=”page”>Item 02</li> <li id=”contato” class=”page”>Item 03</li> </ul> Esses atributos são importantes para formatar e estilizar os elementos com o CSS. Veremos isso mais adiante. | Módulo II
  22. 22. 23 Desenvolvimento web www.triway.com.br | Módulo II Elemento div Blocos Elemento Div Div é uma seção de uma página HTML. Como se uma página tivesse blocos e cada bloco fosse formado por uma div. Por exemplo, a barra lateral esquerda é um bloco forma- do por div. O conteúdo no centro da página fica dentro de um bloco de conteúdo. A barra lateral a direita também é um bloco. Podemos concluir que cada parte do site é um bloco e que para criarmos um bloco usamos div. O elemento div é escrito é escrito com a tag <div> … </div> e pode receber os atributos id e class. Veja um exemplo: <div class=”barra-lateral” style=”border: 1px solid #ccc;”> <ul> <li><a href=”index.html”>Home</a></li> <li><a href=”sobre.html”>Quem somos</a></li> <li><a href=”contato.html”>Contato</a></li> </ul> </div> <div class=”conteudo” style=”border: 1px solid #ccc;”> <p> Aqui fica o conteúdo da página. </p> </div>
  23. 23. 24 Desenvolvimento web www.triway.com.br Veja o resultado no navegador: Como podemos ver div é um bloco. No exemplo ele esta um em cima do outro, pois ainda não foi inserida nenhuma formatação com CSS nele, e por padrão a div ocupa a tela do navegador colocando um bloco sobre o outro.
  24. 24. 25 Desenvolvimento web www.triway.com.br A muito tempo atrás, os sites eram feitos sobre tabelas. Isso ocorria porque ainda não existia uma maneira de formatar e estilizar páginas HTML. Com o lançamento do XHTML4 e o CSS esse quadro foi mudado e até hoje usa exclusivamente blocos (div) para se criar uma página HTML, extinguindo as tabelas dos sites. Mesmo com essa evolução, as tabelas ainda existem no HTML, e hoje ela tem outra função que é bastante usada, princi- palmente para a exibição de tabelas de cadastros, produtos etc. As tabelas são escritas com a tag <table> … </table>, e ela possuem linhas e colu- nas. As linhas são escritas com a tag <tr> … </tr> e as colunas com a tag <td> … </td>. As colunas ficam dentro das linhas. Veja um exemplo de estrutura básica de uma tabela. <table border=”1”> <tr> <td>coluna 01 - linha 01</td> <td>coluna 02 - linha 01</td> <td>coluna 03 - linha 01</td> </tr> <tr> <td>coluna 01 - linha 02</td> <td>coluna 02 - linha 02</td> <td>coluna 03 - linha 02</td> </tr> | Módulo II Tabelas Tabelas
  25. 25. 26 Desenvolvimento web www.triway.com.br | Módulo II <tr> <td>coluna 01 - linha 03</td> <td>coluna 02 - linha 03</td> </tr> </table> Veja o resultado no navegador. As tabelas podem receber os atributos id, class, border, width, height, colspan, row- span tanto na tabela (<table>), quanto em suas linhas e colunas (<tr>, <td>). * rowspan - especifica quantas linhas a célula será mesclada * colspan - especifica quantas colunas a célula será mesclada
  26. 26. 27 Desenvolvimento web www.triway.com.br Tabelas <table> <thead> <tr> <th>Código</th> <th>Descrição</th> <th>Preço</th> </tr> </thead> <tbody> <tr> <td>134</td> <td>Produto 01</td> <td>15,00</td> </tr> ... </tbody> </table> Cabeçalhos em Tabelas As tabelas possuem cabeçalhos, não é obrigatório, mas deixa sua tabela mais organ- izada quando você informa o nome das colunas. Para inserir um cabeçalho em uma tabela, usamos a tag <thead> … </thead>, e sua colunas recebem uma nova tag <th></th>, mas continuam dentro de uma linha. Exemplo: <table> <thead> <tr> <th>Nome</th> <th>Endereço</th> <th>Telefone</th> </tr> </thead> …. Ao inserir um cabeçalho na tabela, você deve informar o corpo da tabela. Para isso usamos a tag <tbody> … </tbody>. Veja um exemplo de como uma tabela deve ser escri- ta, de forma semântica.
  27. 27. 28 Desenvolvimento web www.triway.com.br | Módulo II <table border=”1”> <thead> <tr> <th width=”250”>Nome</th> <th width=”100”>Telefone</th> <th width=”250”>E-mail</th> </tr> </thead> <tbody> <tr> <th>João</th> <th>3252-1141</th> <th>joao@joao.com.br</th> </tr> <tr> <th>José</th> <th>9514-8521</th> <th>jose@jose.com.br</th> </tr> <tr> <th>Paulo</th> <th>9585-7414</th> <th>paulo@paulo.com.br</th> </tr> </tbody> </table> Veja o resultado no navegador.
  28. 28. 29 Desenvolvimento web www.triway.com.br | Módulo II Meta tags, são tags inserida no cabeçalho do documento HTML com informações rel- acionadas aquela página, como por exemplo, descrição do conteúdo, autor, palavras chaves, encode de caracteres. É muito importante usar as meta tags, pois elas ajudam e muito a indexação do site nos motores de busca como Google, Bing etc. As meta tags são escritas com a tag <meta> e não possui tag de fechamento, ou seja, como vimos, o que acontece com a tag de imagem (<img>), ela é fechada na mesma tag que é aberta. Toda meta tag deve ter dois atributos que são atributo name e o atributo content. O atributo name especifica o nome da meta tag, como autor, keyword que são palavras chaves, todas separadas por vírgula e description que é uma descrição do documento. Já o atributo content ele é responsável pelo conteúdo mesmo da tag. Por exemplo, na meta tag que o atributo name for autor (name=”author”) o atributo content deve conter o nome do autor (content=”José Felipe”). Assim como todas as informações que estão no elemento head, as meta tags não são vistas no navegador, ou no site, mas podem ser vistas no código fonte do site. Veja um exemplo: <meta charset=”utf-8” /> <meta name=”author” content=”3Way EAD” /> <meta name=”description” content=”Aula sobre meta tags HTML - 3Way EAD” /> <meta name=”keywords” content=”aula de meta tags, meta tags, html, 3way, ead” /> A meta tag charset Uma meta tag diferente que é obrigatória em todo documento HTML é a meta tag charset. Ela é responsável de informar ao navegador qual tabela de caracteres usar. Sem- pre use a utf-8, pois essa tabela usa caracteres especiais e acentos. Exemplo. <meta charset=”utf-8” /> Meta tags
  29. 29. 30 Desenvolvimento web www.triway.com.br Comentário em HTML <!---comentário --> Comentários Os comentários em HTML são bastante importantes e muito usados como identi- ficadores de elementos. Ajuda muito se você usá-los para informar quando começa um elemento e quando termina, isso para que você não se perca em meio à um monte de tags e elementos parecidos. Para fazer um comentário em HTML usamos a seguinte sintaxe: <!--- aqui fica o meu comentário --> Regra básica e obrigatória: Abre-se um comentário com <!-- e fecha com -->. Lembrando que deve haver três hífens na abertura e dois no fechamento. Pode-se usar um comentário com mais de uma linha, usar acentos, e caracteres especiais. <!--- Este é um comentário com mais de uma LINHA. -->
  30. 30. 31 Desenvolvimento web www.triway.com.br Formulários <form action=“php.php”> ... </form> | Módulo II Formulários Formulários são um dos elementos mais usados na web. De pequenos formulários de contato a extensos cadastros em lojas virtuais. Todo formulário e composto pelo elemento form <form> </form>. Todos os cam- pos que estão dentro dele serão enviados para o servidor. Para que o formulário seja pro- cessado, os dados devem ser enviados a um script externo, escrito por alguma linguagem de programação como php, asp, ruby etc. Para informar o script que irá manipular esses dados, usamos o atributo action no formulário. Exemplo. <form action=”url do script”> ... </form> A tag input Existem vários tipos de inputs, e cada um se comporta de maneira diferente, o que diferencia cada um desses inputs é o atributo type, que pode ser qualquer um dos abaixo: • text - Cria uma caixa de texto de uma linha. • password - Cria uma caixa de texto de uma linha escondendo os caracteres digi- tados.
  31. 31. 32 Desenvolvimento web www.triway.com.br • checkbox - Cria uma caixa que assume dois estados: checado e “deschecado”. Em conjunto com o atributo name é possível que se crie um grupo de checkboxes no qual uma ou mais checkboxes sejam “checados”. • radio - Cria uma caixa que assume dois estados: checado e “deschecado”. Em con- junto com o atributo name é possível que se crie um grupo de radios no qual apenas um radio seja “checado”. • button - Cria um botão e através do atributo value definimos o texto do botão. • submit - Cria um botão para o envio do formulário e através do atributo value definimos o texto do botão. • file - Cria um botão que, ao ser clicado, abre uma caixa de diálogo para a escolha de um arquivo no computador do usuário. • reset - Cria um botão que descarta todas as alterações feitas dentro de um for- mulário. Através do atributo value definimos o texto do botão. • image - Cria um botão para o envio do formulário e deve ser utilizado em conjunto com o atributo src para que uma imagem de fundo seja utilizada no botão. • hidden - Cria um elemento que não fica visível para o usuário, porém pode conter um valor que será enviado pelo formulário. | Módulo II Formulários <input /> • text • password • hidden • checkbox • radio • submit • button • image • file • reset <select> <option>...</option> </select> <textarea cols=“20” rows=“5”> </textarea>
  32. 32. 33 Desenvolvimento web www.triway.com.br Select O elemento select ou combobox como muitos chamam, permite ao usuário escolher uma ou mais opções de uma lista. Veja o exemplo: <select> <option value=”Item 01”>Item 01</option> <option value=”Item 02”>Item 02</option> <option value=”Item 03”>Item 03</option> <option value=”Item 04”>Item 04</option> </select> Neste caso você pode escolher apenas uma opção. Para você poder selecionar mais de uma opção, basta inserir o atributo multiple, assim agora podemos seleciona várias opções. <select multiple=”multiple”> <option value=”Item 01”>Item 01</option> <option value=”Item 02”>Item 02</option> <option value=”Item 03”>Item 03</option> <option value=”Item 04”>Item 04</option> </select> Outra possibilidade que o select te permite é separar opções por grupos. Exemplo: <select multiple=”multiple”> <optgroup label =” Grupo de Itens 01 “> <option value=”Item 01”>Item 01</option> <option value=”Item 02”>Item 02</option> </optgroup> <optgroup label =” Grupo de Itens 02 “> <option value=”Item 03”>Item 03</option> <option value=”Item 04”>Item 04</option> </optgroup> </select> Label As labels são usadas para informar nome de campos, permitindo ao usuário saber quais dados devem ser informados naquele campo. | Módulo II
  33. 33. 34 Desenvolvimento web www.triway.com.br | Módulo III Exemplo: <label>Nome:</label> <input type=”text” name=”nome” /> Textarea Para envio de informações maiores, frases ou textos maiores, usamos o elemento de área de texto ou textarea. Diferente do elemento input, ou texto simples, o textarea deve ser fechado com sua tag de fechamento. Exemplo: <textarea></textarea> Para adequá-lo ao layout da sua página, você pode configurar seu tamanho no css, ou ajustar com os atributos cols e rows. O atributo col é referente ao número de colunas, ou caracter, e ele altera a largura da caixa de texto. Já o atributo rows se refere ao número de linhas e alterando os valores ele altera o comprimento da caixa de texto. Exemplo. <textarea cols=”25” rows=”10”></textarea>
  34. 34. 35 Desenvolvimento web www.triway.com.br | Módulo III Introdução ao CSS nome-arquivo.css CSS (Cascading Style Sheets) ou folhas de estilo em cascata, é uma linguagem de estilo usada para apresentação e formatação de página web. Todo documento CSS deve ser na extensão .css. O principal objetivo do uso do css, é separar a formatação da página do seu conteúdo. Todo documento css deve obedecer a seguinte sintaxe: seletor { propriedade: valor; } O seletor é o elemento html que você deseja alterar o formato, onde ele pode ser especi- ficado pelo elemento e diferenciado por uma classe, id, tipo e de hierarquia. Vou mostrar agora alguns tipo de seletores que vocês irão usar frequentemente em seus projetos. Propriedades são as configurações que irão estilizar o elemento HTML. Toda propriedade deve ter um valor e ser finalizado com um ponto e virgula.
  35. 35. 36 Desenvolvimento web www.triway.com.br Introdução ao CSS Seletor{ Propriedade: Valor;} Seletor Universal O seletor universal seleciona todos os elementos de um documento HTML. Exemplo. * { margin: 0px; padding: 0px; } O exemplo acima é uma técnica muito usada como reset de propriedades padrão dos navegadores. Veremos isso melhor mais a frente. Seletor de tipo Os seletores de tipo, altera as propriedades de todos os elementos que são formados pela mesma tag. Exemplo. p{ color: red; } No exemplo acima, todos os parágrafos, independente de classe ou id irão ser de cor vermelha.
  36. 36. 37 Desenvolvimento web www.triway.com.br Seletores de classe Neste caso todos os elementos que possuírem a mesma classe irão ter a mesma formatação, ou seja, todos os elementos que possuírem o atributo class=”” com o mesmo valor. Exemplo. div.minhaclass { color: blue; } Seletores de id Esses seletores fazem a mesma função dos seletores de classe, só que seu atributo é id=””. Exemplo. div#conteudo { color: black; } Seletor de descendentes Chamamos de seletor de descendentes a seleção de um ou mais elementos fazendo o uso de outros seletores separados por espaços. Um espaço indica que os elementos seleciona- dos pelo seletor à sua direita são filhos diretos ou indiretos dos elementos selecionados pelo seletor à sua esquerda. Exemplo. li a { color: red; } Seletor de filhos Chamamos de seletor de filhos a seleção de umou mais elementos fazendo o uso de outros seletores separados pelo caractere >. Um caractere > indica que os elementos seleciona- dos pelo seletor à sua direita são filhos diretos dos elementos selecionados pelo seletor à sua esquerda. Exemplo. div.conteudo > a.link { color: red; } Dica importante sobre id e classe Como foi exemplificado acima, id e classe são atributos diferentes. As classes em css, são repre- sentadas por .nomedaclasse (.) e a id por #nomedaid (#). A maneira mais certa de usar id e classe é usando id para elementos específicos, como elemen- to pai, ou seja, elementos em que suas propriedades serão exclusivas a ele. E usar classe para elementos de propriedades mais amplas, ou que você precisa usá-las várias vezes em seu site.
  37. 37. 38 Desenvolvimento web www.triway.com.br Propriedades importantes do CSS Como mostramos anteriormente, para alterar os estilos de um elemento HTML, us- amos propriedades para tal tarefa. Vamos mostrar a vocês algumas das propriedades mais usadas para a criação de sites e páginas HTML estilizadas. Cores e Medidas Muito importante antes de você aprender as varias propriedades do CSS, é preciso saber como o CSS trata a cores e várias medidas, pois muitos valores dessas propriedades são em medidas e cores. Cores As cores em CSS são tratadas praticamente em duas formas. Essas são as mais us- adas e são as que você irá usar sempre, que são cores em RGB ou Hezadecimal. Você não precisa decorar e nem ser um expert em código de cores, pois os próprios programas que são usado para o desenho do layout como Photoshop, Gimp entre outros, te fornecem esses códigos, sejam em Hexadecimal ou RGB. Exemplo. Em Hexadecimal. p { color: #000000; } Introdução ao CSS Hexadecimal #xxxxxx; RGB rgb (xx, xx, xx);
  38. 38. 39 Desenvolvimento web www.triway.com.br Introdução ao CSS Medidas in em cm ex pt px Em RGB p { color: rgb(0,0,0); } Medidas As medidas em CSS são relativas ao tamanho da resolução da tela. Ela podem ter os va- lores em; in - polegada. cm - centímetro. mm- milímetro. em - tamanho relativo ao tamanho de fonte atual no documento. 1em é igual ao tamanho da fonte atual, 2em o dobro do tamanho da fonte atual e assimpor diante. ex - essa unidade é igual à altura da letra “x”minúscula da fonte atual do documento. pt - ponto (1pt é o mesmo que 1/72 polegadas). px - pixels (umponto na tela do computador). Confira a uma descrição detalhada das propriedades CSS em nosso guia de referência.
  39. 39. 40 Desenvolvimento web www.triway.com.br Introdução ao CSS Seletores Seletor Universal Seletor de tipo Seletores de classe Seletores de id Seletor de descendentes Seletor de filhos Recapturando os seletores visto acima.
  40. 40. 41 Desenvolvimento web www.triway.com.br Linkando CSS ao HTML 1 – Arquivo Externo 2 – Bloco de Código Inserindo CSS ao HTML Para estilizarmos nossa página HTML devemos vincular o CSS ao documentos HTML, e isso podemos fazer de 3 maneiras. Usando um arquivo externo Você pode criar um arquivo .css e linka-lo a sua página HTML, para isso devemos inseri-lo ao elemento head. Para isso usamos a tag lilnk como alguns atributos. Veja o exemplo. <link rel=”stylesheet” type=”text/css” href=”url do arquivo css” media=”all” /> Explicando os atributos. rel: significa o tipo relacionamento desse link que no caso é uma folha de estilo (stylesheet). type: informa o tipo de arquivo que estamos linkando ao nosso HTML. href: Usado também em links de página, ele mostra o endereço do arquivo. media: Esse atributo informa ao navegador para qual dispositivo deve ser usado esse arquivo CSS. Neste caso, que o valor é all, ele será usado em todos os dispositivos, telas grandes, celulares, impressão.
  41. 41. 42 Desenvolvimento web www.triway.com.br Blocos de CSS Você pode inserir também em qualquer parte do documento HTML um bloco com propriedades de CSS em cima do bloco que . Essa maneira não é muito boa pois deixa seu código um pouco bagunçado. Vamos inserir um bloco de CSS agora. Para inserir um bloco de código CSS devemos abrir o elemento de CSS com a tag <style>, e informar o atributo type com os valores de text/css. Exemplo. <style type=”text/css”> ... </style> Dentro do elemento inserimos os seletores e propriedades CSS. Outro exemplo. <style type=”text/css”> p { color: red; } </style> Como podemos observar a sintaxe continua a mesma. Estilo dentro do Elemento Outra forma de inserir CSS dentro de um elemento, é inserir o estilo dentro da tag de abertura do elemento. Essa técnica é muito usado em editores Wysiwyg. Exemplo. <div style=”color:red;”> ... </div> A sintaxe muda um pouco mas a base é a mesma, e as propriedades são inseridas dentro do atributo style. Dica importante Você pode usar vários arquivos CSS na sua página HTML, porém tome cuidado com o nome de seletores, pois o que prevalece sempre é o último. Por exemplo, digamos que você tenha um elemento com a classe chamada conteudo, e dentro do primeiro arquivo CSS com sua propriedades definidas, e digamos que no segundo arquivo CSS vc também tenha esse seletor com outras propriedades, o que prevalece será o do último. Dica Quando você precisar inserir bloco de código insira dentro do elemento head, assim você deixa seu código mais limpo e mais organizado.
  42. 42. 43 Desenvolvimento web www.triway.com.br Os comentários em CSS, são bastante importantes, pois como no HTML ele permite que você possa documentar todo o seu código. Uma dica valiosa, aprenda e pegue o cos- tume de documentar o seu código, isso irá te ajudar se um dia, muito tempo depois você ou outra pessoa precise fazer uma manutenção. Os comentários em CSS devem ser na seguinte sintaxe. /* meu comentário em uma linha*/ /* Este é um comentário com mais de uma linha */ /** * Este é um comentário * com mais de um linha mais arrumadinho. **/ Comentários em CSS /* Comentário de uma linha */ /* * Comentário com * Mais de uma linha */
  43. 43. 44 Desenvolvimento web www.triway.com.br CSS Docs - Padronizando seu código CSS Os comentários em CSS não existe uma padronização especifica. Basta que ele este- ja dentro da sintaxe correta, ele funciona. Vou mostrar a vocês uma pdronização feita por dois desenvolvedores Alemães que esta conquistando vários adeptos, o CSSDoc. O CSS- Doc possui uma sintaxe simples, mas que facilita muito a documentação do CSS e deixa seu código bem organizado. Comentários em CSS CSSDocs http://cssdoc.net/
  44. 44. 45 Desenvolvimento web www.triway.com.br Ele é constitupido basicamente em dois tipos de bloco de comentário. Um co- mentários de descrição do CSS no topo do docuemento, e um bloco por sessão do HTML. Exemplo. Comentários de Arquivo (File Comments) O File Comment é utilizado como descrição principal do arquivo CSS, aparece ap- enas uma vez no arquivo e deve ser escrito no topo. Geralmente nos comentários de arqui- vo são descritas informações sobre a função do arquivo e alguns metadados como autor, versão, etc. Comentários de Seção (Section Comments) Abrem seções em arquivos CSS e podem ser utilizados diversas vezes para estrutu- rar o código CSS. O significado de “seção” é bastante amplo e depende do designer/desen- volvedor. Algumas seções comuns em CSS são: Reset, Layout, Tipografia, entre outros. Principais tags do CSSDoc Os comentários em CSSDoc podem fornecer diversas informações sobre os arquiv- os CSS e trechos específicos de código. Algumas tags referem-se apenas a informações do arquivo e são inseridas em File Comments, mas a maioria são utilizadas em Section Com- ments. Exemplos de algumas das tags mais utilizadas são: @autor: comentário de arquivo, pode conter o nome e/ou o e-mail do autor do documento. @colordef: comentário de arquivo, especifica a cor (em hexa ou RGB) e pode também ser fornecido o nome da cor e sua utilização seguido de ponto-e-vírgula. @bugfix: comentário de arquivo e de seção, apresenta uma descrição resumida sobre um trecho de código para corrigir alguma incompatibilidade de navegador. @css-for: comentário de arquivo e de seção, usado em conjunto com @bugfix para espe- cificar qual browser está relacionado com a correção feita (Ex.: @css-for IE 6).
  45. 45. 46 Desenvolvimento web www.triway.com.br @section, @subsection e @subsubsection: comentários de seção, para indicar as seções de um código CSS em até 3 níveis. Quando utilizar @subsection, o bloco de co- mentário também deve também conter @section, e o mesmo para o @subsubsection, deve conter a @subsection e a @section. Você pode consultar todas as tags do CSSDoc em nosso guia de referência do CSS- Doc e pode tambpme pesquisar mais sobre o assunto na documentação do site.
  46. 46. 47 Desenvolvimento web www.triway.com.br Introdução ao JavaScript Client-side Para a criação de páginas web dinâmicas, usaremos JavaScript. O JavaScript é uma linguagem client-side, ou seja, ela é interpretada pelo navegador. Iremos aprender uma base de JavaScript e como usar ela em nosso site, deixando - o mais dinâmico e atraente.
  47. 47. 48 Desenvolvimento web www.triway.com.br Introdução ao JavaScript 1 – Arquivo Externo 2 – Bloco de Código Inserindo JavaScript a nossa página. Existe duas maneiras de você inserir JavaScript na sua página web, uma delas é in- serindo um bloco de código usando a tag script, assim como mostramos no CSS anterior- mente. Esse bloco pode ser inserido em qualquer parte do documento HTML, porém seu código ficará mais organizado se você o inserir dentro do elemento head. Exemplo. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8” /> <title>Aula de JavaScript</title> <script> …. </script> </head> … Uma outra maneira, e a que eu recomendo, pois deixa a estrutura do seu site muito mais organizada e fácil de manusear é inserir um documento JavaScript externo, usando o atributo src na tag <script>.
  48. 48. 49 Desenvolvimento web www.triway.com.br Exemplo. <!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8” /> <title>Aula de JavaScript</title> <script src=”url do arquivo javascipr”></script> </head> … Simples não. O seu documento de JavaScript deve conter a extensão .js. Exemplo. meus-scripts.js scripts.js. etc.
  49. 49. 50 Desenvolvimento web www.triway.com.br Variáveis var Nome da Variável= “valor”; Váriávies, são um espaços localizados na memória que usamos para armazenar um valor ou uma expressão. Para declararmos uma variável em Java script, usamos a seguinte sintaxe. var nomedavariavel = “valor da variável”; Exemplo. var meunome = “Caio Vinicius“; As variáveis podem ser números, números com casas decimais, textos, e boleanos (verdadeiro ou falso).
  50. 50. 51 Desenvolvimento web www.triway.com.br Matemáticos ou aritméticos: (+, -, *, /); Atribuição (=, +=, -=, *=, /=, %=) Lógico (&&, ||) Relacional (==, !=, <, <=, >, >=) Operadores Operadores Como em toda linguagem de programação, os operadores servem para manipular os dados. Podemos fazer desde operações matemáticas a comparações de dados. O JavaS- cript nos oferece vários tipos de operadores, segue alguns tipos: Matemáticos ou aritiméticos: (+, -, *, /); Atribuição (=, +=, -=, *=, /=, %=) Relacional (==, !=, <, <=, >, >=) Lógico (&&, ||) Operadores Matemáticos Servem para realizar operações matemáticas. Exemplo. var dois = 1 + 1; var tres = 4- 1; var dez = 5 * 2; var cinco = 10 / 2;
  51. 51. 52 Desenvolvimento web www.triway.com.br Operadores de Atribuição Serve para atribuir algum valor. Existem seis tipos de operadores de atribuição. Simples = Incremental += Decremental -= Multiplicativa *= Divisória /= Modular %= Exemplo. var valor = 1; // valor = 1 2 valor += 2; // valor = 3 3 valor -= 1; // valor = 2 4 valor *= 6; // valor = 12 5 valor /= 3; // valor = 4 6 valor %= 3; // valor = 1 Basicamente os operadores de atribuição nos economiza em escrita de códigos, já que essas mesmas funções poderiamos escrever como operações matemáticas. Operadores Relacionais Como o próprio nome diz, esses operadores fazem relações entre variáveis ou va- lores. Podemos fazer as seguintes relações de dados: Igualdade == Diferença != Menor < Menor ou igual <= Maior > Maior ou igual >= Exemplo. var valor = 2; var t = false ; t = ( valor == 2); // t = true t = ( valor != 2); // t = false t = ( valor < 2); // t = false t = ( valor <= 2); // t = true t = ( valor > 1); // t = true t = ( valor >= 1); // t = true
  52. 52. 53 Desenvolvimento web www.triway.com.br Operadores Lógicos Para verificarmos duas ou mais condições ao mesmo tempo usamos operadores lógicos. O JavaScript nos oferece dois tipos de operadores lógicos, que são: “E” - && “OU” - || var valor = 30; var teste = false ; teste = valor < 40 && valor > 20; // teste = true teste = valor < 40 && valor > 30; // teste = false teste = valor > 30 || valor > 20; // teste = true teste = valor > 30 || valor < 20; // teste = false teste = valor < 50 && valor == 30; // teste = true Estude bastante operadores pois eles são a base para muitos scripts que você irão escrever em sua vida de desenvolvedor.
  53. 53. 54 Desenvolvimento web www.triway.com.br If e else if e else if e esle ( se , senão), são comando de digamos verificação, onde se uma função for verdadeiro ele é executado ou senão não for outra função é excutada. Imaginamos que um amigo seu lhe pede um dinheiro emprestado, e você passa pra ele a seguinte condição: - Se eu tiver o dinheiro no banco eu lhe empresto, mas se não tiver não tem como te em- prestar. É basicamente isso que os comandos if e else fazem se a resposta de if for verdadeira ele executa a primeira ação, senão for verdadeira ele executa a segunda ação. Exemplo. var dinheiro = 100; var saldobanco = 110; if(saldobanco <= dinheiro) { document . writeln (’Posso te emprestar o dinheiro ’); } else { document . writeln (’Não posso te emprestar o dinheiro.’); }
  54. 54. 55 Desenvolvimento web www.triway.com.br For e while Nome do Cliente Nome do Cliente x 100 for e while Os comandos for e while são bem úteis quando precisamos repetir alguns coman- dos. Imagine que precisemos exibir na tela a seguinte mensagem: Olá, tenha um bom dia! imagine que tenhamos que exibir essa mensagem vinte vezes na tela. Para nos poupar do trabalho de digitar ou copiar e colar as vinte vezes, podemos usar o comando while. Exemplo. // aqui mostramos o numero de vezes que a mensagem foi exibida var numimpressoes = 0; // aqui mostramos o numero de vezes que a mensagem será exibida. while(numimpressoes <= 10) { document.writln(‘Olá, tenha um bom dia!’); // aqui o operador ++ incremeta o código a quantidade de vezes que foi inrmada. numimpressoes++; }
  55. 55. 56 Desenvolvimento web www.triway.com.br O comando for, faz o mesmo trabalho do while, a diferença é que ele deve receber três argumentos. for ( var contador = 0; contador <= 100; contador ++) { document . writeln (’Olá, tenha um bom dia. ’); document . writeln (’<br/>’); } Essa é base para trabalhar com JavaScript, e se você tiver alguma noção de alguma noção de alguma outra linguagem de programação, você vai ver que tudo isso que falamos é base muitas linguagens de programação.
  56. 56. 57 Desenvolvimento web www.triway.com.br Introdução à funções function nomeDaFuncao(){ document.writeln(‘Olá aluno!’); } Funções Uma função JavaScript é uma sequência de instruções JavaScript que serão exe- cutadas quando você chamá-la através do seu nome. funções em JavaScript devem obedecer a seguinte sintaxe: function nomedafuncao(parametro) { …. } Exemplo. function mostraola() { document.writeln(‘Olá Mundo’); } Para que a função seja executada basta chama´la em algum ponto da página HTML como em um link por exemplo. <a href=”javascript:mostraola()”>Mostrar Olá</a>
  57. 57. 58 Desenvolvimento web www.triway.com.br Adquira Nosso Curso No Curso HTML, CSS, Javascript você irá aprender na prática como desenvolver um website do zero. Inicialmente você aprende sobre HTML, suas tags e como usá-las. Depois passa por uma introdução ao CSS que é a linguagem de marcação e como inter- pretá-la e usá-la. No módulo de JavaScript você aprende o básico para usar e entender como funciona ao usar bibliotecas como Jquery por exemplo. Depois de todos esses con- hecimentos básicos das linguagens, partiremos para a mão na massa, onde se inicia o processo de desenvolvimento do site do zero. Com aulas interativas e atrativas você irá aprender de forma rápida como criar seu primeiro site. Matricule-se já!

×