HTML5

Já pensou em começar a estudar programação?
Vamos
entender um pouco sobre esse universo!
Sugiro a utilização deste PDF juntamente com o curso.

O site que eu fiz esse curso é online e GRATUITO!
Você pode acessa-lo clicando aqui!
Introdução a criação de sites com HTML 5
Começamos entendendo o que é o HTML.
O HTML é a principal linguagem utilizada na web. É linguagem de marcação e não de

programação.
É muito mais fácil do que você imagina e muito intuitivo!
Pra começar, utilizamos qualquer aplicativo que não tenha formatação de texto, eu por
exemplo utilizo o bloco de notas! Para salvar esse arquivo e visualizá-lo como página
web, acrescente no final do nome do seu arquivo .HTML. Certifique-se de que a
codificação do seu arquivo esteja como UTF-8, este é um padrão internacional que
permite acentos!
Antes de qualquer coisa temos que saber a linguagem do HTML 5:
Nós usamos as chamadas tags que são os sinais de menor e maior que são usadas para
abrir e fechá-las, respectivamente. < > e < / >
Quando fazemos a montagem de todo e qualquer tipo de elemento não utilizamos

espaço, coloquei aqui só para demonstração explícita no site.
Para escrever um PARÁGRAFO é utilizado o elemento p.
Fica assim: < p >Este é um parágrafo! < / p >
Para adicionar um TÍTULO é utilizado o elemento title pode conter até 90 caracteres e
é um elemento OBRIGATÓRIO
Fica assim: < title > Este é um título! < / title >
Estrutura básica do HTML5
DOCTYPE: Indica para o Browser como o conteúdo vai ser lido e interpretado pelo
navegador.
Então sempre que começarmos temos que colocar da seguinte maneira:
< !DOCTYPE html > temos o HTML pois é a linguagem utilizada.

Também temos que colocar a linguagem, o idioma, que estamos utilizando, com isso
acrescentamos mais uma linha:
< html lang=" pt-br" > Assim indicamos que é o português brasileiro!
Toda essa parte acima é invisível, porém muito importante para a construção do código!
Temos também o cabeçalho, utilizamos < head >, nele incluímos algumas informações
como metadados, que são o tipo de conteúdo que pode conter no documento, autor,
descrição, palavras-chave, charset que é o tipo de idioma do site e o título a construção
dele é assim:
< !DOCTYPE html >
< html lang=" pt-br" >
< head >
< meta charset=" utf-8" >
< meta name="keywords"content=" como montar site, tutorial, aprender"/ >
< meta name="author"content="Késiah Araújo Sofia"/ >
< meta name="description"content=" Aprenda a montar um site básico"/ >
< title> Como montar um site - BÁSICO < /title >
< /head >
Agora, vamos entender a estrutura semântica do HTML5
Como toda cabeça tem um corpo (body) nosso documento também tem, e é assim que
nos referimos a ele: body! É a partir dele que nosso documento começa a pegar forma e
começa a mostrar algumas informações que colocamos! Depois de ter acrescentado toda
parte de linguagem, metadados e títulos vamos acrescentar ainda a estrutura semântica.
Na estrutura semântica temos:
< !DOCTYPE html >
< head >
< meta charset=" utf-8" > Como explicado acima, UTF-8 é a linguagem universal que
permite acentos.

< title> Como montar um site - BÁSICO < /title >
< /head >
<body>
<header> Aqui colocamos conteúdo do cabeçalho.
<nav> Aqui vai a navegação!
< /nav >
< /header > Aqui fechamos esses dois elementos
<aside> Aqui colocamos publicidades e links secundários
< /aside > Aqui fechamos o elemento
<section> Aqui dividimos os conteúdos em blocos e seções.
<article> Aqui representa o conteúdo, o ponto central dos documentos.
< / article >
< /section > Aqui fechamos os dois elementos.
<footer> Aqui colocamos informações de rodapé do documento.
< /footer > Aqui fechamos esse elemento.
< /body > Aqui fechamos o corpo do documento.
Agora vamos aprender a colocar links, grupos, marcação de títulos e subtítulos e

outros elementos que vou descrever no decorrer dessa pequena introdução a esse
universo.
Para inserir links utilizamos o elemento <a> dessa forma ele fica assim:
a href=" link a ser inserido"> frase referente ao assunto para indicar o link, por exemplo
"clique aqui" < /a > e assim fechamos! Quando utilizamos links que desejamos que
abra em nova janela utilizamos o elemento _blank" fica assim:< a
href="target="_blank" link a ser inserido">...
< h1 > Título principal, e assim temos até o < h6 > seguindo a ordem de relevância!
< div > Bloco
< hr > Linha horizontal
< blockquote > citação
< b > e < strong > Negrito, porém strong destaca!
< i > e < em > Itálico, porém em destaca!
< small > Texto com tamanho reduzido.
< sub > Texto subscrito.
< sup > Texto supescrito.
< s > Texto riscado.
< cite > Citações de obras no geral, novelas, músicas, teatro...
< q > Citações de outra fonte.
< dfn > Definições de glossários ou didáticos.
< abbr > Definições de siglas e abreviações dentro do dfn
< li > Colocar esse pontinho antes da frase.
< time > Horário e data. Dentro do elemento time temos alguns atributos como:
< datetime > Data genérica.
< pubtime > Data de publicação.
Aqui vou mostrar como colocar uma imagem:
Como colocar mídias no HTML 5
Para colocar uma imagem no HML5 temos que saber atuar com CSS, porém como
ainda não cheguei nessa aula, vou mostrar apenas o teórico, a marcação desse lugar
onde colocaremos a imagem.
A tag que usaremos é < img > essa é uma tag vazia, como a dos metadados, não
precisa ser fechada!
Temos alguns atributos para a tag:
src -> É o endereço da imagem e alt -> é alternativa de texto, descrição da imagem
width e height -> Largura e altura da imagem, respectivamente.
EXEMPLOS:
Neste caso eu usei as tags assim : < img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_
and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" width="400"
height="400" "alt= HTML5" >
Nesta mesma ideia nós colocamos vídeos! PORÉM acrescentamos algumas interfaces,
por exemplo a de controle no caso fica assim:
Usei as tags assim : < video src="qualquervideo.m4v" height="300" width="400"

controls > < /video >
Para acrescentarmos audio também é dessa forma:

Neste caso eu usei as tags assim : < audio
scr="https://qualquercoisa.com.br/media.audio.mp3" controls> < /audio >
Vamos entender o IFRAME
Ele é quem permite acrescentar um documento HTML dentro de um HTML já

existente!
Exemplo:
Usei as tags assim : < iframe name="interno" width="1200" height="1200"

src="https://cursos.timtec.com.br">< /iframe >
Agora temos FIGURE e FIGCAPTION
Figure mostra a imagem de conteúdo principal do documento.
Figcaption é a legenda da ilustração.
Exemplo:
Neste caso usei a tag assim:
< figure >
< img src="

https://static.wixstatic.com/media/bb1bd6_d21f307608834f5fb07d6e4e438452de~m
v2.jpg/v1/fill/w_400,h_200,al_c,q_90/bb1bd6_d21f307608834f5fb07d6e4e438452de
~mv2.jpg "alt="Programação" >
< figcaption > Programação HTML5 adquirida através do < a

href="https://static.wixstatic.com/media/bb1bd6_d21f307608834f5fb07d6e4e43845
2de~mv2.jpg/v1/fill/w_400,h_200,al_c,q_90/bb1bd6_d21f307608834f5fb07d6e4e438
452de~mv2.jpg" >Google.< /a >< /figcaption >
< /figure >
Vamos aprender a montar TABELAS
O elemento tabela, representado como table, pode ser utilizado para compor
calendário, planilha, quadro comparativo, grade horária e afins.
Nós utilizamos a tag dessa maneira < TABLE >.
Temos:
< tr > para linha, < td > para células e < th > para títulos.
Então utilizando apenas essas tags podemos montar tabelas desse tipo:
Exemplo 1 Exemplo 2
HTML 5 PROGRAMAÇÃO
FIGURE FIGCAPTION
TAGS ATRIBUTOS
Para conseguir montar essa tabela eu usei as tags dessa forma:
< table >
< tr >
< th >Exemplo 1< /th >
< th >Exemplo 2< /th >
< /tr >
< tr >
< td >HTML 5< /td >
< td >PROGRAMAÇÃO< /td >
< /tr >
< tr >
< td >FIGURE< /td >
< td >FIGCAPTION< /td >
< /tr >
< tr >
< td >TAGS< /td >
< td >ATRIBUTOS< /td >
< /tr >
< /table >
Formulários
Conteúdo gerado pelo usuário por formulários como perfis em redes sociais,
comentários em notícias e compras online.
Utilizamos a tag FORM para isso.

Para realizar a comunicação de um app ou até mesmo páginas, com a página que o
formulário está presente utilizamos ACTION. Para o envio de dados do formulário
utilizamos METHOD.
GET São os dados inseridos nos bancos de dados, informações sobre pesquisa ou
página solicitados.
POST São dados enviados ocultos pelo navegador e armazenados em um programa ou

banco de dados.
NAME Nomeia o formulário e permite compatibilidade com browsers antigos
ID Identificador que dá nome ao formulário.
Então para utilizarmos essa tag ela ficaria assim:
< formaction="contato.php"method="post"name="contato"id="contato >
// Aqui vai o formulário.
< /form >
FILDSET e LEGEND delimitam e nomeiam os componentes de funcionamento de um

formulário.
< FILDEST > Conjunto de campos, botões e opções de um formulário.
< LEGEND > Legenda para o grupo de opções.
Eles são utilizados para aparecer dessa forma:
E neste caso, utilizamos a tag dessa forma:
< form action= "formulario.php" method="post" name="formulario"

id="formulario" >
< fieldset >
< legend >Informações Pessoais< /legend >
< /fieldset >
< fieldset >
< legend >Formação Acadêmica< /legend >
< /fieldset >

< /form >
O elemento INPUT insere os componentes de controle em um formulário, como

campos de texto, botões, controles deslizantes e afins.
TYPE determina a forma e a funcionalidade do elemento INPUT.
Utilizamos dessa forma:
Para isso utilizei a tag dessa forma:
< input type="submit" >
Assim podemos mostrar que utilizamos espaços para e-mail, senha, enviar e limpar com
a tag:
Para isso utilizei a tag dessa forma:

id="formulario" >
< input type="e-mail" > < br >
< input type="password" > < br >
< input type="submit" > < br >
< input type="reset" > < br >
< /form >
Temos também PLACEHOLDER que dá dica de preenchimento e aparece dentro

do FILDSET.
Value Nomeia o botão.
Utilizamos as tag mencionas para ficar assim:

Para isso, utilizei as tags dessa maneira:

id="formulario" >
< input type="email" placeholder="E-mail" > < br >
< input type="password" placeholder="Senha" > < br >
< input type="submit" value="Entrar" > < br >
< input type="reset" value="Limpar" > < br >
< /form >
Para delimitar um espaço para redigir comentários precisamos de outros elementos,

são eles:
Text Area = entrada e controle de texto, cols = largura em colunas, rows = altura em
linhas, autofocus = indica para o browser realçar o campo, maxlength = limita o
número de caracteres, required = preenchimento obrigatório, wrap= soft padrão que
NÃO insere quebra de linha, e hard o navegador insere quebra de linha.
Novalidate é utilizado diretamente no FORM e não há necessidade de validação dos

dados inseridos. Formnovalidate Salva sem enviar.
Nós utilizamos esses elementos para conseguir esse espaço:

Para isso utilizamos os elementos dessa forma:

id="formulario" novalidate >
< textarea id="comentario" name="comentario" cols="80" rows="15"

maxlength="600" wrap="soft" placeholder="Deixe sua opinião aqui" >< /textarea
>
< p >< input type="submit" value="Enviar" > < br >
< input type="submit" value="Apenas Salvar">
formnovalidate /> < /p >
< /form >
Agora vamos aprender um pouco sobre o CSS
Você pode verificar alguns tipos de formatação através desse site.
O CSS é um dos programas utilizado para fazer formatação do site, como editar fonte,
cor, tamanho da letra. Nós trabalhamos com camadas separadas, ele sempre é utilizado
na tag < HEAD >.
A regra geral do CSS é baseada na seguinte estrutura: Seleto, Propriedade e Valor.

Onde respectivamente significam o elemento HTML a ser alterado, o que será alterado e
intensidade da alteração. Ficaria da seguinte maneira: h1{font-size:12px}
O método mais recomendado e mais utilizado atualmente é o externo! Neste modelo as

regras são escritas em OUTRO ARQUIVO/DOCUMENTO, separado do HTML, ou
seja, teremos um documento .HTML e um documento .CSS, eles trabalham juntos pois
são linkados um ao outro. Um único arquivo CSS pode ser utilizado para inúmeros
arquivos HTML.
Nós utilizamos assim:
< !DOCTYPE html >
< head >

< title> Como montar um site - BÁSICO
< link href=" estilo.css" (estilo.css é o nome do documento a exercer a formatação)
rel="stylesheet" (rel é obrigatório, se trata de uma folha de estilo)
type="text/css" >
< /head >
Cores e Backgrounds
Na web as cores são codificadas a partir do modo RGB; RED, GREEN, BLUE. É
codificado em um padrão chamado hexadecimal, um sistema de numeração baseado em
16 dígitos onde cada cor é representada por um par de dígitos de 0 a 9 e de A a F. 0 É o
mais baixo e F o mais alto. São 3 pares de dígitos. O caracter é #!
Exemplo:
Branco:#FFFFFF
Preto:#000000
Existem tabelas na web com cores e seus respectivos códigos.
COLOR É a propriedade do CSS que define a cor de um elemento HTML também

chamado de cor de 1º plano: foreground, a cor de 2º plano: background.
Se quisermos que o texto do corpo de uma página seja cinza, ficaria assim:
< !DOCTYPE html >
< head >
< title> Como montar um site - BÁSICO
< link href=" estilo.css"
rel="stylesheet"
type="text/css" >
body{color:#444444;}
< / style>
< /head >
Para alterarmos a cor do título para azul:
h1{color:#0000ff;}
Para editar a cor de fundo de um título como mostra este documento com fundo amarelo
utilizamos:
h3{background-color:#FFFF00}
Para inserir imagem no fundo utilizamos:
body {background-image: url("site.jpg")" } Se colocarmos dessa forma a imagem se

repete até preencher toda página. Para alterar utilizamos a propriedade: background-
repeat: acrescido de sua função desejada:
repeat-x: repete horizontalmente; repeat-y: repete verticalmente e no-repeat: não

repete.
Para definir se a imagem será fixa ou se irá rolar com o uso da barra de rolagem usamos
background-attachment: scroll para imagem rolar e fixed para imagem ficar fixa.
Para definir a posição da imagem:
background-
position: TOP(superior), RIGHT(direito), LEFT(esquerdo), CENTER(centro) e B
OTTOM(inferior).
Para que a imagem de fundo fique fixa, não se repita e alinhada no lado inferior
esquerdo seria:
body{background-image: url
("https://pbs.twimg.com/profile_images/722103435861061632/YZt4ENg-
_400x400.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;}

Utilizamos a Declaração única para usar todas as possibilidades no background. É
utilizada nessa ordem: COLOR, IMAGE, REPEAT, ATTACHMENT, POSITION. O
uso dela fica assim: background:#0000 url("site.jpg") no-repeat fixed left top;
Fontes, textos, links e listas
Fontes com serifa e fontes sem serifa
Fontes com serifa são fontes arredondadas como a deste texto, fontes estilo Times New
Roman, ou Georgia.
Fontes sem serifa são fontes restas, lisas, como fontes estilo Aria, Tahoma.
Podemos utilizar qualquer uma, caso não seja compatível com o dispositivo usado
podemos acrescentar a opção de substituição para que seja compativel. Utilizamos dessa
forma:
Caso seja com serif:(lembrando que essas informações vão todas no cabeçalho do
documento)
p{ font-family: Georgia,serif; }
Caso seja sem serif:
p{ font-family: Arial,sans-serif; }
FONT-STYLE: Utilizada para especificar um estilo de fonte na maioria das

vezes ITÁLICO, ela permite 3 valores; normal, italic, oblique.
É utilizado dessa forma:
p{font-style:italic;}
FONT-SIZE: Define o tamanho da fonte, este tamanho pode assumir um valor absoluto
ou relativo!
Absoluto: Tamanho específico em px ou pt, o usuário NÃO altera.
Relativo: Tamanho em relação a outros elementos, o usuário consegue alterar.
p{font-size:120%} ou h1{font-size:1 em;} (A medida em equivale a 16px)
Font-weight: Define o peso (negrito) da fonte, pode ser utilizado por nome e números
de 100 á 900
Dessa forma fica assim:

NOME NÚMERO
LIGHTER(leve) 100
NORMAL (normal) 400
BOLD(negrito) 700
BOLDER (mais negrito) 900
DECLARAÇÃO ÚNICA
font-style, font-weight, font-size, font-family
Fica assim: p{font:italic 700 0.8 em verdana;}
Além disso temos como definir o alinhamento, sublinhado e se as letras são maiúsculas
ou minúsculas. São respectivamente: text-align, onde podemos alinha o texto na
direita (right), esquerda (left), center (centralizado), justify (justificado), text-
decoration sem edição (none), underline (sublinhado), overline (linha acima), line-
trough (riscado), text-tranform maiúscula (uppercase), minúscula (lowercase) e a
primeira letra maiúscula (captalize).
Utilizamos dessa forma:
p{text-align: right; text-transform:uppercase;}
Letter-spacing: Espaçamento entre as letras
Word-spacing: Espaçamento entre as palavras
Utilizamos assim:
h1{letter-spacing: 3px;}
Os links marcados dentro de um documento HTML com a tag < a > por padrão aparece
sublinhado e azul, com CSS podemos personalizar com a propriedade text-
decoration:none(sem decoração) e text-decoration:underline(texto sublinhado).
Podemos utiliza-lo dessa forma:
a:link= não visitado.
a:visited= visitado.
a:hover= quando o mouse passa sobre o link.
a:active= quando é clicado.

a:link{color:#FFFFFF;text-decoration:none;}
a:visited{color:#FFFFFF;text-decoration:none;}
a:hover{color:#FFFF00;text-decoration;underline;background-color:#000000;}
a:active{color:#FFFFFF;text-decoration:none;}
As listas permitem algumas configurações específicas como por exemplo:
List-style-type: Define o marcador da lista
List-style-image: Define uma imagem como marcador para os itens da lista, quem
recebe estas propriedades é o elemento < ul > no caso de uma lista NÃO ordenada. < ol
> no caso de uma lista ordenada.
Circle= Circulo
Decimal= Números
Disc= Disco
Lower-alpha= Minúscula
Lower-roman= Romanos minúsculo
Square= Quadrado
Upper-alpha= Maiúsculo
Upper-roman= Romanos maiúsculo
None= Nenhum
ul{list-style-type: square;}
ul{list-style-image: url('imagem.png');}
Para fazer uma lista horizontal não existe o tipo de marcador acima. utilizamos assim:
li{display: inline;}
Box model, classe, ID e outros
Box model
Margin: Margem. Top(a cima), Right(direita), Bottom(abaixo), Left(esquerda)

Border: Borda, define cor, espessura e estilo. Border-style: Estilo ou desenho é
utilizado assim: p{border-style:solid;}, tambem temos Border-color:define a cor é
utilizado assim: p{border-color:#FF0000;} além de também termos o Border-
width: que é a espessura medida em px ou thin (fina), medium (media) e thick (grossa) temos
o modelo de espessura das bordas: none (sem borda), solid borda simples), double (borda dupla),
dotted (borda pontilhada), dashed (borda tracejada), radius (bordas arredondadas) inset (borda em baixo relevo) e
outset (borda em alto relevo). Utilizamos dessa forma:
h1{border-style:solid; border-color: #AAA123; border-width: thin;}.
Além disso podemos utilizar cada linha da borda de uma maneira e para isso temos:
Top(a cima), Right(direita), Bottom(abaixo), Left(esquerda)
PARA FICAR ASSIM:
Usamos:
h5{border-top-style: dotted;
border-right-style: solid;
border-bottom-style:dotted;
border-left-style: solid;
border-radius: 10px;
border-color: #FFFF00;}
Podemos utilizar a Declaração única
Para bora em geral: p{border: medium solid #00FF00;}
Para borda individual: p{border-bottom 1px solid #CCCCCC;}
Class
É um tipo de seletor, marcada com . (ponto) antes do nome, pode marcar vários
elementos, não pode começar com números, não pode conter caracteres especiais.
Para alinhar no centro o conteúdo de qualquer elemento HTML: .centro{context-align:

center;}
ID
É um tipo de seletor marcado com # antes do nome, marca apenas um elemento, não
pode começar com números, não pode conter caracteres especiais.
Utilizamos dessa forma: #destaque{width: 85%; margin: 0 auto; border: thin solid
#000000; padding: 2%; background-color: #F5F5F5;} < div id="destaque" >
Float: Permite que os elementos deslocados para direita ou esquerda possibilitando que
os elementos ao redor sigam as margens dele. Normalmente utilizado para posicionar
imagens dentro de um bloco de texto.
Float: right(direita)
Float: left(esquerda)
Usamos assim: .esquerda{float:left; margin-right:1%; margin-bottom: 1%;} < p >

< img-class= "esquerda" url.png >
@Font-face: Permite indicar qualquer fonte para ser visualizada no navegador de

usuário, para usá-lo é necessário indicar em url o endereço com arquivo da fonte e dar
um nome: font-family"nome escolhido". Utilizamos dessa forma:
@ font-face { font-family:"minha fonte"; scr:url("sitedafonteescolhida.com");

} Aplicando a fonte escolhida a qualquer elemento: p {font-family: "miha fonte";}
Text-shadow
É utilizado pra fazer sombra. Para usar é necessário definir a posição horizontal, vertical
e a distancia ou desfoque. Todos esses valores em px e ainda o quarto valor que é
utilizado para selecionar a cor da sombra.
Utilizamos dessa forma: p {text-shadow: 2px 2px 3ox #CCCCCC}
Transition:
Permite transições o conceito e uso de animações é complexo requer outros

conhecimentos que vão além da proposta deste documento, mas vamos ver um exemplo
simples de aplicação:
Um elemento div com 100 px de largura e altura com a cor amarela (#FFFF00) e troca
sua largura para 300 pixels utilizando uma transição de 2 segundos com a propriedade
transition assim que o mesmo sofre a ação do mouse (hover)
Para isso usamos assim: div { width:100px; height:100px; background-

color:#FFFF00; transition:width 2s; } div:hover { width:300px;} colocando no
cabeçalho essa informação e a tag < div > < / div > no local onde queremos a transição.
Introdução ao JAVASCRIPT (JS)
O JavaScript é uma linguagem de programação que pode ser incorporada diretamente

em páginas HTML com a função de adicionar mais interatividade. É a camada de
comportamento. Ela é classificada com uma linguagem do tipo client side, ou seja,
funciona no lado do cliente - no navegador usuário. Com essas informações você
conseguirá trabalhar com trechos de JS integrando-os dentro do HTML.
Controla os elementos interativos que respondem a ação do mouse como menus,

janelas, painéis de conteúdo, players de áudio e vídeo. Pode ser programado para
executar determinadas ações quando uma página acaba de carregar ou quando clica em
algum elemento no HTML. É capaz de interpretar e modificar um conteúdo HTML.
Podemos escrever um texto diretamente no corpo de um documento HTML com auxílio
do JS usando a tag < script > que marca a interação de um texto dentro do código. A
função que permite escrever com JS é o WRITE é precedida do objeto que vai recebe-
la. Na linguagem de programação temos os OBJETOS que são como personagens que
auxiliam na realização de ações. Funciona assim
< script >
document.write("qualquer texto");
< / script >
Também podemos usar para específicos:
< script >
document.write("< h1 >qualquer texto < / h1 >");
< / script >
Função
Comando, instrução para executar uma determinada tarefa. Para utiliza-la é simples:
Function nomdefuncao
{ // o que vai ser executado }
Para que entre em ação é necessário fazer o que é conhecido nas linguagens de
programação como "chamar a função" isso é feito através de alguma ação do usuário,
como clicar, passar o mouse ou quando uma nova pagina é carregada, as ações são
chamadas de evento. Eles indicam quais instruções um determinado aplicativo executa
em dado momento.
Um recuso muito conhecido no JS é o alert ele abre uma caixa de diálogo, um alerta,
uma janela de aviso dentro do documento HTML. Usamos assim:
e aparece esta imagem:
Para isso:
< script >
function clique() {
alert("Obrigada por clicar!") ;
< /script >
Colocando no cabeçalho essa informação e a tag < button onclick="clique()">Clique

aqui!< /button > no local onde queremos o alerta.
Script Externo: Usado quando o conteúdo necessita ser trabalhado em um arquivo

independente no caso de arquivos extensos ou complexos. O documento fica com a
extensão o .js através da url:
< script url =" arquivo.js" > < / script >
InnerHTML Traduzindo seria HTML interno, o sentido é de ser interno a um elemento

HTML. É utilizado para inserir ou alterar uma marcação ou conteúdo HTML.
Para identificar o que queremos alterar utilizamos: GetElementByID pois localizamos

através do ID.
Usando para alterar o texto de um determinado elemento ao clicar o botão:
Para isso:
function alterar() {
document.getElementById("Titulo").innerHTML="Texto Alterado";
Colocando no cabeçalho essa informação e a tag < button onclick="alterar()">Clique

aqui para alterar!< / button > no local onde queremos a alteração
VAR: Variavel é um elemento capaz de armazenar e representar um valor ou expressão

que poderá ser aproveitado pelo código. Os tipos de dados mais comuns dentro de uma
variável são:
Number: Valor numérico
String: Sequencia de caracteres sempre em aspas.
20
Usamos:
< script >
var a = 4 ;
var b = 5 ;
document.write ( a * b )
< / script >
Objeto: Criamos um novo objeto assim:
Este lápis é preto, número 2, da marca Faber e custa R$ 1,50.
Para isso usamos a seguinte propriedade:
< script >
var lapis=new Object();

lapis.cor="preto";
lapis.numero=2;
lapis.marca="Faber"
lapis.preco="R$ 1,50"
document.write(" Este lápis é " + lapis.cor + ", número " + lapis.numero + ", da
marca " + lapis.marca + " e custa " + lapis.preco + "." );
< /script >
Print:Permite imprimir a página que está sendo visualizada pelo usuário. É utilizada
junto com o objeto window, que representa uma janela do navegador:
window.print();
Para isso usamos:
< script >
function imprimir() {
window.print();
< /script >

Colocando no cabeçalho essa informação e a tag < button
onclick="imprimir()">clique aqui para imprimir < /button > no local onde
queremos a solicitação de impressão.
JQuery
É uma biblioteca JS, pequenos códigos pré-fabricados prontos para serem usados
O jQuery:simplifica a escrita do JS, cria efeitos visuais e animações, acessa e altera

elementos HTML, adiciona interatividade e é compatível com multiplos navegadores
Depois de baixar o jQuery você pode utilizar assim:
< script src="js/ jquery-1.10.2.min.js">< /script > Consta esse nome e número pois é
de acordo com o documento baixado.
Também pode ser utilizado via link
Temos a classe seletora:
Seletor de tag:
$(“p”)
$(“a”)
Seletor de classe:
$(“.centro”)
$(“.colorido”)
Seletores de id
$(“#geral”)
$(“#conteudo”)
Seletores compostos
$(“header a”)
$(‘#conteudo.centro”)
Temos os eventos:
Eventos de mouse mais comuns:
click – clique simples

dblclick – clique duplo
mouseenter – Quando o mouse passa sobre o elemento
Eventos de janelas mais comuns:
load – quando o documento carrega
unload – quando o documento é fechada
Efeito alternar
Efeito alternar - toggle - funciona alternando os métodos hide - esconder e show -

exibir
$("seletor").toggle();
Exemplos do livro HTML 5 - Embarque imediato de Fábio Flatschart publicado

pela Editora Brasport.

HTML5

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML5

Enviado por

Direitos autorais:

Formatos disponíveis

Já pensou em começar a estudar programação?

Sugiro a utilização deste PDF juntamente com o curso.

Introdução a criação de sites com HTML 5

Começamos entendendo o que é o HTML.

O HTML é a principal linguagem utilizada na web. É linguagem de marcação e não de

É muito mais fácil do que você imagina e muito intuitivo!

Antes de qualquer coisa temos que saber a linguagem do HTML 5:

Quando fazemos a montagem de todo e qualquer tipo de elemento não utilizamos

Para escrever um PARÁGRAFO é utilizado o elemento p.

Fica assim: < p >Este é um parágrafo! < / p >

Estrutura básica do HTML5

Então sempre que começarmos temos que colocar da seguinte maneira:

< !DOCTYPE html > temos o HTML pois é a linguagem utilizada.

< !DOCTYPE html >

< html lang=" pt-br" >

< head >

< meta charset=" utf-8" >

< meta name="keywords"content=" como montar site, tutorial, aprender"/ >

< meta name="author"content="Késiah Araújo Sofia"/ >

< meta name="description"content=" Aprenda a montar um site básico"/ >

< title> Como montar um site - BÁSICO < /title >

< /head >

Agora, vamos entender a estrutura semântica do HTML5

Na estrutura semântica temos:

< !DOCTYPE html >

< html lang=" pt-br" >

< head >

< meta name="keywords"content=" como montar site, tutorial, aprender"/ >

< meta name="description"content=" Aprenda a montar um site básico"/ >

< title> Como montar um site - BÁSICO < /title >

< /head >

<header> Aqui colocamos conteúdo do cabeçalho.

<nav> Aqui vai a navegação!

< /nav >

< /header > Aqui fechamos esses dois elementos

<aside> Aqui colocamos publicidades e links secundários

< /aside > Aqui fechamos o elemento

<section> Aqui dividimos os conteúdos em blocos e seções.

<article> Aqui representa o conteúdo, o ponto central dos documentos.

< / article >

< /section > Aqui fechamos os dois elementos.

<footer> Aqui colocamos informações de rodapé do documento.

< /footer > Aqui fechamos esse elemento.

< /body > Aqui fechamos o corpo do documento.

Agora vamos aprender a colocar links, grupos, marcação de títulos e subtítulos e

< datetime > Data genérica.

< pubtime > Data de publicação.

Aqui vou mostrar como colocar uma imagem:

Como colocar mídias no HTML 5

Temos alguns atributos para a tag:

width e height -> Largura e altura da imagem, respectivamente.

Usei as tags assim : < video src="qualquervideo.m4v" height="300" width="400"

Para acrescentarmos audio também é dessa forma:

Vamos entender o IFRAME

Ele é quem permite acrescentar um documento HTML dentro de um HTML já

Usei as tags assim : < iframe name="interno" width="1200" height="1200"

Agora temos FIGURE e FIGCAPTION

Figure mostra a imagem de conteúdo principal do documento.

Figcaption é a legenda da ilustração.

< figure >

< img src="

< figcaption > Programação HTML5 adquirida através do < a

< /figure >