Javascript como programaçao web, Manuais, Projetos, Pesquisas de Programação Javascript

Baixe Javascript como programaçao web e outras Manuais, Projetos, Pesquisas em PDF para Programação Javascript, somente na Docsity!

Apostila: versão 1.

www.youtube.com/canalfessorbruno

www.cfbcursos.com.br

[email protected]

www.facebook.com/canalfessorbruno

twitter: @fessorBruno

• Introdução
• Iniciando HTML5, código básico
• Outras tags importantes
  • Outras meta tags importantes “keywords e description”
  • Anexando CSS e Javascript externos
  • Adicionando ícone à página “favicon”
• Novas tag importantes de HTML5, de olho na nova semântica
  • section
  • nav
  • article
  • aside
  • header
  • footer
  • time
  • mark
• Os novos elementos de HTML5
• Criando nossa primeira página em HTML5
• Iniciando em CSS
  • Anexando folha de estilos externas
  • Propriedades margin, width e background-color
  • A propriedade padding e border-radius para arredondar os cantos..........................................................................
  • Entendendo uso das propriedades float e clear
  • A propriedade border
  • color e text-align
  • font-size
• Segunda página em HTML5
  • Criando um menu horizontal
  • Centralizando a página e configurando fundo do body..............................................................................................
  • e .....................................................................................................................................................
• Criando um slider básico em javascript
• Novos elementos de formulário
  • tel
  • search
  • email............................................................................................................................................................................
  • url
  • Datas e Horas
  • number........................................................................................................................................................................
  • range
  • color
• Criando o formulário para nosso site “Escola de Inglês”
• Pattern para validação dos formulários
• Detalhes e Sumário
• Transparência..................................................................................................................................................................
• Gradiente
  • linear-gradient (variação linear)
  • radial-gradient (variação circular)
  • Repetição de gradientes
• Áudio e Vídeo
• SVG – Gráficos vetoriais direto pelo browser
• Conteúdo editável
• Revisão ortográfica
• MathMl – Criando equações
  • Variável
  • Números......................................................................................................................................................................
  • Operadores
  • Exponenciação / Superscripts
  • Agrupar expressões sup
  • Raizes
  • Frações
  • Juntando tudo
• meter...............................................................................................................................................................................
• progress...........................................................................................................................................................................
• Terceira página em HTML5
• Resumo das tags HTML
  • Novas tags HTML 5......................................................................................................................................................
  • Tags já existentes em HTML 4 que foram continuadas
  • Tags descontinuadas, não devem ser usadas

Introdução

HTML 5 é a mais nova versão da linguagem padrão para desenvolvimento Web, uma atualização necessária para o HTML a versão 5 traz novidades interessantes, uma nova semântica de desenvolvimento e novas tags, em conjunto com novos comandos para formatação CSS as possibilidades de design de um site aumentam bastante.

A maioria das tags que usamos em HTML4 continuam em operação, algumas tags foram descontinuadas outras foram reformuladas e muitas foram mantidas exatamente como são, portanto, todo conhecimento adquirido em desenvolvimento HTML4 será aproveitado em HTML5.

Neste curso não iremos focar em HTML4, então é importante que você tenha esse conhecimento prévio para que o aprendizado seja mais fluido, se você não sabe HTML é recomendado que você assista todas as aulas do curso de HTML do CanalFessorBruno no link “www.youtube.com/canalfessorbruno”.

Vamos iniciar nosso curso de HTML5 e aprender esse novo conceito para desenvolvimento Web.

Iniciando HTML5, código básico

Vamos começar do começo, nosso primeiro assunto sobre HTML5 é sobre o novo padrão do código básico da página, a seguir vamos ver o código que forma o esqueleto de uma página HTML5, o código essencial, básico, sempre iremos começar uma nova página com este código.

Título da página

Vamos descrever as principais mudanças no código básico, doctype, meta charset e html.

= O “doctype” deve ser a primeira tag a ser inserida, através desta apresentação do “doctype” podemos identificar que a página é desenvolvida em HTML5. O “doctype” indica ao browser qual especificação de código usar, neste caso HTML5.

= Marca o início do código HTML e já informa qual a linguagem principal do documento.

= Esta meta define qual página de código será usada na página, veja que ficou muito mais simples em relação à HTML4.

HTML4 charset =

HTML5 charset =

Este é o código básico principal, toda página HTML é iniciada es estruturada neste código, lembre-se, ao iniciar uma nova página o primeiro trabalho a ser feito é inserir este código básico.

A seguir o código para inserir o ícone na página, como as outras tags link, note que é uma tag “link”, então deve ser inserida dentro da tag .

Novas tag importantes de HTML5, de olho na nova semântica

Nesta parte vamos aprender sobre as novas tags principais de HTML5. É importante entendermos estas tags para não criar confusão na hora da construção da página, a seguir vamos descrever e entender a utilização destes novos elementos.

section

A tag section define uma nova seção “genérica” no documento. É uma tag de estruturação e organização da página, a section passa a ser o primeiro elemento de organização da página, dentro do teremos várias tags organizando cada parte da página. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato, artigos, notícias, etc. A tag é bem genérica e tem a função de organizar os elementos dentro de uma página, basicamente uma serve para agrupar elementos que fazem parte do mesmo bloco ou tipo

nav

O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. O elemento nav é bem aplicado para criar o menu principal do dite, links na barra lateral, grupo de links no rodapé, etc.

article

Como o próprio no me diz, o elemento article representa um artigo, um post, uma notícia, de uma forma geral um bloco de texto comum.

aside

O elemento aside representa uma barra lateral por exemplo bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nave outras informações separados do conteúdo principal do website.

header

O elemento header representa um cabeçalho, uma introdução ou um título de um artigo por exemplo. O elemento header pode ser usado para cabeçalho da página ou de um article por exemplo, devemos tomar cuidado para não confundir com a tag , são tags distintas, tem funções bem diferentes. Com a tag aplicada à página de uma forma geral, podemos inserir logotipo, nome do site, slogan, barra de pesquisa, etc, geralmente é a parte superior do site.

footer

O elemento footer representa o rodapé da página. Seria o último elemento antes de fechar a tag HTML. O elemento footer pode ser usado para a página ou também no final de uma seção.

time

Este elemento serve para marcar parte do texto referente a horário ou data.

mark

Com esta tag podemos marcar um trecho de um texto, colocar em evidência parte do texto.

Pronto agora que já aprendemos sobre as principais novas tags de HTML5 já podemos iniciar o desenvolvimento de uma página, estas são só as tags principais para a nova semântica de HTML5, existem muitas outras tags que iremos aprender, para vídeo, áudio, canvas, etc, a medida que formos evoluindo em nosso curso vamos aprendendo as novas tags de HTML5.

Outro fator importante é sobre o código de formatação CSS, na página HTML iremos inserir somente código HTML, toda parte de formatação será feita em um arquivo externo CSS, portanto à medida que formos evoluindo em HTML veremos paralelamente CSS e em alguns casos também Javascript.

Então, com todo conhecimento básico adquirido, vamos começar logo nossa primeira página em HTML5.

Os novos elementos de HTML 5

A seguir vamos entender os principais novos elementos para agrupamento de texto/conteúdo em HTML5, antes de começar é importante destacar que a tag permanece ativa, embora a maioria dos tutoriais e textos sobre HTML5 encontrados na web não usam ou se referem à a tag para formatação e disposição dos elementos, alguns materiais citam até uma certa proibição ou grande restrição no uso desta tag, a verdade é que não existe essa proibição, podemos usar a tag da mesma forma que anteriormente que nossa página vai continuar sendo HTML5, o que se pode entender é uma nova forma de trabalho, uma segunda opção de estruturação da página.

Nesta parte vamos entender a funcionalidade dos novos elementos para agrupamento de texto/conteúdo de HTML5, vamos entender como utilizar estes novos elementos, iremos criar duas estruturas usando somente os novos elementos, mas por razões de aprendizagem e não restritivas.

Veja na ilustração a seguir um modelo simples que mostra a semântica dos novos elementos de HTML5, é uma proposta interessante para mostrar a utilização dos novos elementos, se fizer uma pesquisa na web verá outras alterativas e aqui no próprio curso vamos usar de outras maneiras, não se preocupe com a maneira X ou Y ser a correta ou a errada, o importante é que você entenda estes novos elementos.

Vamos ao código para esta estrutura.

Semântica 2

Obviamente que se você digitar os códigos anteriores, salvar e tentar abrir no browser, você não verá nada, pois inserimos somente o código para a estrutura/esqueleto, mesmo se adicionarmos textos, ainda precisaremos da formatação CSS, mas o intuito nesta parte do curso é fazer com que entenda o uso das novas tags e não construir de fato as páginas, esta tarefa nós faremos no próximo passo.

Criando nossa primeira página em HTML

Vamos começar o trabalho, pegue sua xícara de café e vamos começar.

Para o desenvolvimento das página propostas aqui no curso podemos usar dois aplicativos, um o “Bloco de Notas” está disponível no Windows ou outro semelhante de outro S.O, outro programa um pouco mais completo é o Notepad++ que você pode baixar pelo link oficial ( notepad-plus-plus.org ).

Vamos usar o “Notepad++” por facilitar o entendimento e visualização do código.

Antes de iniciar a digitação do código, vamos configurar o “Notepad++” para que salve o arquivo com a página de códigos “utf-8” como padrão. Clique no menu “Formatar” e selecione a opção “Codificação em UTF-8”.

Com a página de códigos configurada no programa já podemos iniciar o trabalho.

Caso ainda não tenha um arquivo novo, em branco, clique no menu “Arquivo – Novo”, na nova página digite o código básico, mostrado a seguir.

Primeira página do curso HTML 5

Salve este arquivo com nome “pagina1.html” em alguma pasta de sua preferência, em seguida, copie os arquivos pac.jpg, pacbqr.jpg e pasl.jpg que estão na pasta “pg1” para a mesma pasta em que acabou de salvar o arquivo html.

Até aqui nada de muito complicado, em relação a HTML4 as únicas novidades são a presença das tags , e .

Vamos adicionar o conteúdo do cabeçalho, na tag digite o código destacado em vermelho no modelo a seguir.

Parque das Águas de Caxambu Caxambu - Minas Gerais - Rua João Carlos, 100 - Centro

O parque possui 12 fontes de água mineral com propriedades curativas diferentes. Opções para a prática de esportes. Piscina semi-olímpica com água mineral (adulto e criança) e um gêiser que explode três vezes ao dia.

Parque das Águas de São Lourenço São Lourenço - Sul de Minas Gerais

No Parque das águas voccê encontrará: atrações, banhos e massagens, gruta & igreja, jardim japonês além de restaurantes e lojas. O Parque das águas tem ao todo nove fontes.

Parque das Águas de Cambuquira Cambuquira - Sul de Minas Gerais

O Parque das Águas de Cambuquira reúne em suas fontes diversos tipos de águas, sendo elas ferruginosa, gasosa, sulfurosa, magnesiana e litinada.

Pronto, agora vamos adicionar o texto do rodapé.

Página desenvolvida para o curso de HTML5 do Canal Fessor Bruno. (todos os direitos reservados)

Assim finalizamos o conteúdo da página e podemos partir para a formatação, confira a imagem com o código a seguir.

Agora já podemos iniciar a formatação, salve as alterações feitas e sem delonga vamos prosseguir.

Iniciando em CSS

No “Notepad++” ou no “Bloco de Notas do Windows” crie um novo arquivo e o salve com nome “estilos.css” na pasta que está todo o trabalho anterior.

Anexando folha de estilos externas

Com este arquivo criado agora precisamos anexá-lo em nossa página HTML, para isto usamos a tag configurada em “stylesheet” (folha de estilos), adicione o código destacado em vermelho em sua página HTML.

Primeira página do curso HTML 5

Agora no arquivo “estilos.css” vamos adicionar nosso primeiro código de formatação do corpo da página , não irei abordar CSS do início com tanto afinco, então, se você não sabe CSS, precisa assistir as aulas de HTML do “CanalFessorBruno”.

Propriedades margin, width e background-color

Digite os comandos a seguir no arquivo “estilos.css”.

body{ margin: 0 auto; width: 960px;

*padding  A forma mais fácil de entender padding é entender como uma margem interna, podemos traduzir ao pé da letra como “preenchimento” como substantivo traduzimos como acolchoamento que fica mais fácil de entender, veja a ilustração a seguir.

Agora que já sabemos onde a configuração do padding afeta, vamos configurar nosso com ID “cab”. Adicione os comandos a seguir no nosso arquivo “estilos.css”.

#cab{ background-color: #508050; padding: 10px 20px 10px 20px; border-radius: 0px 0px 20px 20px; color:#FFF; }

#cab  Identificador para referenciar o elemento com ID “cab” no HTML.

padding: 10px 20px 10px 20px;  Formatação do padding, neste caso, configuramos os quarto lados, iniciando pelo topo (top) com valor 10px na sequência 20px na direita (right), 10px para baixo (bottom) e 20px para esquerda (left), para ficar mais fácil a associação siga o modelo: “padding: top right bottom left”.

border-radius: 0px 0px 20px 20px;  Este comando de formatação está na especificação de CSS3, e serve para arredondar os cantos, no nosso caso, vamos arredondar somente os cantos de baixo, então, usamos “0px 0px 20px 20px”, lemre-se que neste caso, iniciamos com o canto superior esquerdo (se), depois canto superior direito (sd), canto inferior direito (id) e por último canto inferior esquerdo (ie).

border-radius: se sd id ie;

color:#FFF;  O comando color formata a cor da fonte, para a cor, estamos usando o formato hexadecimal resumido, como o R o G e o B serão FF, não precisamos colocar #FFFFFF, podemos resumir usando um dígito para cada canal, #FFF. Salve as alterações e atualize a página HTML para ver o resultado.

Agora já podemos formatar a com o conteúdo principal. Vamos adicionar o parâmetro ID na tag , siga o código a seguir destacado em vermelho para alterar sua página.

Parque das Águas de Caxambu Caxambu - Minas Gerais - Rua João Carlos, 100 - Centro

Salve o arquivo HTML e vamos adicionar a formatação no arquivo “estilos.css” como no código a seguir.

#parques{ background-color: #505080; padding:0px 10px 10px 10px; border-radius: 20px; }

Como não há nada de novo a formatação acima, não vou dar muitos detalhes, salve o arquivo CSS e atualize a página HTML para ver o resultado.

Vamos formatar o rodapé para que fique parecido com o cabeçalho, para esta formatação não vamos precisar identificar com o parâmetro ID, pois, só temos um elemento , assim, basta formatar este elemento, adicione o código a seguir no arquivo “estilos.css”.

footer{ background-color: #508050; padding: 10px 20px 10px 20px; border-radius: 20px 20px 0px 0px; color:#FFF; margin-top: 20px; }

Note que é praticamente a mesma formatação que utilizamos para o ID “cab”. É muito importante otimizar nosso código, mesmo que se trate de um código de formatação, podemos reutilizar o código do ID “cab” para nosso da seguinte maneira.

Apague este código que acabamos de adicionar para o e adicione o elemento “footer” no CSS de formatação do “#cab” como no destaque em vermelho no código a seguir.

Com as imagens alinhadas à esquerda resolvemos parte do problema, mas veja na ilustração a seguir que ainda não está 100% resolvido, pois, agora para a a imagem que está flutuando sai do fluxo normal dos elementos e não ocupa mais espaço como uma caixa porque ela está flutuando.

Como resolver este novo problema? Usando “clear” é claro, quase sempre que usarmos “float” vamos precisar usar “clear”, vamos entender isto.

A propriedade “clear” é muito importante no controle de elementos flutuantes, basicamente ela define que do ponto onde adicionamos “clear” em diante os elementos subsequentes não irão mais contornar o “float”.

Então, basicamente “clear” não é para o elemento “float” e sim para os elementos subsequentes, “clear” limpa a ação do “float” e dai para frente os elementos não irão mais contornar o “float”.

Os valores possíveis para a propriedade “clear” são:

none: Não impede o contorno de elementos flutuantes (default). left: Evita a fluidez do conteúdo à direita dos elementos com float:left; permanecendo em baixo dele. right: O mesmo que “left”, evitando fluir o conteúdo à esquerda dos elementos com float:right. both: O mesmo que “left” e “right”, o conteúdo fica em baixo dos elementos flutuantes não importando para que lado flutuem. inherit: Herda o valor de clear do elemento pai, caso haja.

Agora que entendemos o problema e a solução, vamos criar a classe para a formatação “clear” no CSS e adicionar as tags que irão aplicar o clear no HTML.

No arquivo “estilos.css” adicione o código a seguir.

.vazio{ clear: both; }

No código acima criamos uma classe chamada “vazio”, o ponto antes do nome simboliza que é uma classe, como parâmetro usamos simplesmente “clear:both”.

Com a classe criara, podemos adicionar ou para usar a classe “.vazio”. Iremos usar o , então adicione os comandos destacados no seu código de acordo com o modelo a seguir.

Parque das Águas de Caxambu Caxambu - Minas Gerais - Rua João Carlos, 100 - Centro

O parque possui 12 fontes de água mineral com propriedades curativas diferentes. Opções para a prática de esportes. Piscina semi-olímpica com água mineral (adulto e criança) e um gêiser que explode três vezes ao dia.

Parque das Águas de São Lourenço São Lourenço - Sul de Minas Gerais

No Parque das águas voccê encontrará: atrações, banhos e massagens, gruta & igreja, jardim japonês além de restaurantes e lojas. O Parque das águas tem ao todo nove fontes.

Parque das Águas de Cambuquira Cambuquira - Sul de Minas Gerais

O Parque das Águas de Cambuquira reúne em suas fontes diversos tipos de águas, sendo elas ferruginosa, gasosa, sulfurosa, magnesiana e litinada.