Mini curso html5 slides

  • Published on
    13-Apr-2017

  • View
    269

  • Download
    0

Transcript

  • Aprendendo Web com HTML5

    Carlos Rodrigo, Jnior Mendes

    .

  • 1. INTRODUO

  • HTML uma linguagem de marcao da World Wide Web.

    A especificao do HTML5 ainda est em construo,

    mas a maioria dos browsers j suportam boa parte dos novos

    elementos e APIs do HTML5

  • ROTEIRO E MATERIAIS

    1. 3 Camadas de Desenvolvimento Web;

    2. Principais Tags de uma estrutura Web;

    3. Praticando as Tags;

    4. Porque o novo HTML5;

    5. Principais caractersticas do HTML5;

    6. Desafio das funcionalidades do HTML, criando um

    minisite;

    7. CSS sintaxe do css, propriedades;

    8. Criando o seu primeiro site HTML com CSS.

  • ROTEIRO E MATERIAIS

    Ferramenta de Desenvolvimento

    Editor padro do Sist. Operacional

    Windows: Notepad

    Linux: gedit

    Editor de texto que recomendo...

    Brackets

  • As trs camadas de desenvolvimento

    Primeira Camada: Informao HTML

    Segunda Camada: Formatao CSS Terceira Camada : Comportamento JavaScript

    3 Camadas de Desenvolvimento

    Web

  • Primeira Camada: Informao

    O HTML marca a informao dando-lhe

    significado;

    O contedo deve ser marcado entre tags. EX.: Ol Pessoal!

  • Segunda Camada: Formatao

    CSS- Cascading Style Sheets

    O CSS formata o contedo em HTML cuidando

    do design da pgina.

    Existem duas formas de usar o CSS. Embutido

    no HTML entre as tags ou em

    um arquivo externo conectado ao HTML por um

    link.

  • Terceira Camada: Comportamento

    Com o JavaScript voc pode dimensionar,

    rotacionar e reformatar os elementos de sua

    pgina.

    Controla os valores definidos pelo CSS e

    manipula as propriedades.

  • Exemplo para identificar cada

    elemento em uma pgina...!

    www.uol.com.br

  • Principais Tags de uma estrutura

    Web

    A tag indicar ao

    browser qual a verso do HTML em que o documento

    est escrito.

    A tag usado em conjunto com sua tag de

    fechamento < / HTML > e ser colocado no incio e no

    final do documento.

  • A tag - que tambm ter seu tag de

    fechamento servir para delimitar uma rea de

    cabealho.

    A tag - serve para o

    reconhecimento da biblioteca de alfabetos

    A tag - ser usado dentro dos tags ,

    e servir apenas para colocar um ttulo que aparecer na

    barra de ttulo do seu browser ( no esquea o ) .

    Dentro das tags sero colocados

    todos os comandos , textos e imagens da sua pgina

  • Porque o novo HTML5...

    A verso anterior do HTML foi a (4.01) que foi lanada em

    1999 e no evoluiu desde l

    A web, ao contrrio, mudou bastante se fazendo necessrio o

    novo...

    HTML5 o novo padro para HTML!

  • Principais caractersticas do

    HTML5

    Uma caracterstica admirada por todos, foi a que o

    HTML5 acarretou todas as funcionalidades do HTML

    anterior. Exclundo apenas as tags no usadas, ou as que

    foram melhoradas em sua funcionalidade.

    Exemplos de Tags tradicionais do HTML4.

  • A tag Texto qualquer cria uma espcie de

    cabealho no documento.

    Ex.:

    Cabealho Grande

    . .

    . .

    . .

    Cabealho Pequeno

    A tag Adiciona um pargrafo na sua pgina.

    A tag Negrito

    A tag Italico

    A tag Sublinhado

    A tag para centralizar o texto.

  • A tag ela usada assim porque o valor ela

    mesma, a tag o prprio atributo, quebra de linha.

    A tag do mesmo jeito. Ela cria uma linha

    horizontal na tela.

    A tag O que vai aparecer na tela

    essa tag vai direcionar voc ao link que desejar.

    A tag essa tag de

    puxar uma imagem selecionada.

  • O que temos de novidade no HTML5?

    Novos elementos semnticos e atributos.

    Novos elementos de marcao para contedo

    , , , ,

    Novos controles de formulrios

    Calendrio, datas, horas, email, telefones, url,

    busca, etc.

    APIs nativas para assistir a criao de aplicaes web.

    Armazemanento Local.

  • Desafio

    Criar um site de um artista favorito seu...

    1. Onde ter uma imagem desse artista;

    2. E uma lista com 5 msicas que voc mais gosta

    3. Com links direcionando para algum site onde

    poderemos ver a letra da cano.

  • CSS

    O que eu posso fazer com CSS?

    CSS uma linguagem para estilos que define o layout de

    documentos HTML. Por exemplo, CSS controla fontes, cores,

    margens, linhas, alturas, larguras, imagens de fundo,

    posicionamentos e muito mais. Aguarde e voc ver!

    Qual a diferena entre CSS e HTML?

    HTML usado para estruturar contedos. CSS usado para

    formatar contedos estruturados.

  • Suponha que desejamos uma cor de fundo vermelha para

    a pgina web:

    Usando HTML podemos fazer assim:

    Com CSS o mesmo resultado ser obtido assim:

    body {background-color: #FF0000;}

    Como voc pode notar os cdigos HTML e CSS so mais

    ou menos parecidos. O exemplo acima serve tambm para

    demonstrar o fundamento do modelo CSS:

    A sintaxe bsica das CSS

  • Com CSS o mesmo resultado ser obtido assim:

    body {background-color: #FF0000;}

  • Exemplos de propriedades do CSS

    .h1 { color: black; }

    .h1 {font-family: arial, verdana, sans-serif;}

    .h2 {font-family: "Times New Roman", serif;}

    .p {

    font-family: arial;

    color: blue;

    }

    .p { text-align: justify; } pode ser center para centralizar.

  • Exemplos de propriedades do CSS

    .a:link { color: blue; } Links no visitados

    .a:visited { color: red; } Links Visitados

    .a:active { background-color: red; } Links Ativos

    .a:hover { color: orange; font-style: italic; } Curso sobre

    o link

    .a { text-decoration:none; } Aqui tira o sublinhado do

    link Obs.: Voc tem que colocar em todos os a

  • Exemplos de propriedades do CSS

    #img {

    height: 200px;

    width: 200px;

    }

    Obs.: na questo dos tamanhos pode usar px ou %,

    que equivale porcetagem da tela.

    Voc deve est se perguntando mas e esse jogo da

    velha no lugar do ponto...!

  • Identificando (Classes e Ids )

    . = Classe # = Id

    Classe usado para um grupo de elementos.

    EX.

    .p {

    font-family: arial;

    color: blue;

    }

    J o Id usado para um nico elemento.

    EX.

    #img {

    height: 200px;

    width: 200px;

    }

  • Como usar as (Classes e Ids ) no meu

    HTML

    O sabi no sabia.

    Que o sbio sabia.

    Que o sabi no sabia assobiar.

  • Como usar as (Classes e Ids ) no meu

    HTML

  • Desafio

    Formate o site que voc criou recetemente.

    1. Mude o background;

    2. Altere o tamanho da imagem para 200px de

    altura e 200px de largura;

    3. Estilize os links das msicas;

    4. Formate a fonte da lista de msicas;

    5. Crie um cabealho com a frase Expotec de

    Joo Camara 2014 antes do nome do artista;

    6. Crie um rodap com a frase Desenvolvido por

    (coloque o seu nome).

  • Desafio

    Para ajudar no desafio segue o link com a tabela de

    cores:

    http://www.cultura.ufpa.br/dicas/htm/htm-cor1.htm

  • AGRADECIMENTOS

    Obrigado a todos que esto aqui presentes...